zoom

모바일 웹에서 화면이 확대/축소되지 않도록 설정하기

모바일 기기에서 화면이 확대/축소되지 않도록 설정하기

요즘 나오는 대부분의 워드프레스는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 자동으로 모바일 버전이 표시됩니다. 모바일 버전에서 손가락을 벌리거나 오므리면 화면이 확대/축소되지 않도록 설정하려면 다음 코드를 header.php 파일에 추가하도록 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

만약  <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ /> 메타 태그가 header.php 파일에 이미 있다면 user-scalable=no만 추가하면 됩니다. Viewport를 지원하는 않는 장치의 경우 다음 코드를 추가합니다.

<meta name="HandheldFriendly" content="true" />

인터넷 익스플로러(IE) 10 버전에서 제대로 작동하지 않는 경우 -ms-content-zooming: none | zoom 구문을 사용합니다(여기 참고). 가령 다음과 같은 CSS 코드를 스타일시트 파일에 추가하도록 합니다.

html {

-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;

}
// Source: stackoverflow

모바일 기기에서 가로로 스크롤되지 않도록 하기

모바일 장치에서 가로(수평)로 스크롤되지 않도록 하려면 다음과 같은 코드를 시도해봅니다.

body{
width:320px; // 혹은 적당한 크기 또는 100%
overflow-x:hidden;
}

이 내용은 더 이상 유효하지 않다고 Matthew님께서 알려주셨습니다. 아이폰, 스마트폰 미디어 쿼리는 “아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리“를 참고해보시기 바랍니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.