모바일 기기에서 수평(가로) 스크롤 없애기

출처 : https://www.thewordcracker.com/miscellaneous/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EC%97%90%EC%84%9C-%EC%88%98%ED%8F%89-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%97%86%EC%95%A0%EA%B8%B0/

모바일 기기에서 수평 스크롤 없애기 - 워드프레스 정보꾸러미

 

모바일 장치에서 수평 스크롤 없애기

모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되어 매우 불편하게 됩니다. 모바일 기기에서 수평 스크롤을 비활성화하여 이 문제를 해결할 수 있습니다.

모바일 기기에서 수평 스크롤이 되는 경우 다음과 같은 조치를 취해보도록 합니다.

우선 다음 메타 태그를 header에 추가합니다. (이미 있는 경우 기존 것을 대체합니다.)

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

어떤 사용자는 content="initial-scale=1.0; maximum-scale=1.0;를 삭제하니 문제가 해결된다고도 하네요.

 

<meta name="viewport" content="user-scalable=0;"/>

아이폰 등 Apple iOS 기기에서 문제가 나타나는 경우 다음 메타 태그를 추가하도록 하도록 합니다.

 

<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, 
user-scalable=no" name="viewport" />

 

 

iOS 기기에서의 문제에 대해서는 이 stackoverflow 글에서 자세한 내용을 확인해볼 수 있습니다.

저는 위의 방법으로도 모바일 기기에서 가로 스크롤이 없어지지 않았습니다. 대신 다음과 같은 CSS 코드를 스타일시트 파일(style.css)에 추가하니 문제가 해결되었습니다.

 

/* 모바일 수평 스크롤 금지 */ 
html, body { max-width: 100%; overflow-x: hidden; }

 

 

이외에도 다음과 같은 CSS 코드를 시도해볼 수 있습니다.

 

body { 
overflow: hidden; 
width: 100%; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

 

 

이상으로 모바일 기기에서 수평 스크롤이 생기는 경우에 수평 스크롤을 없애는 방법에 대해 살펴보았습니다.