모바일 환경에서 화면 확대/축소(Pinch Zoom) 비활성 하기

 

웹페이지를 모바일 환경에서 볼 때,
사용자가 손가락을 사용하여 화면을 확대 혹은 축소를 하지 못하도록 만들어보자.

 

[참고] Pinch Zoom
사용자가 직접 두 손가락을 사용해 화면을 확대 혹은 축소를 하는 경우

 

Android

우선 삼성폰. 즉, Android환경에서는 다음의 코드로 손쉽게 확대 및 축소 기능을 비활성화할 수 있다.

(기존의 viewport 메타태크에 user-scalable=no만 추가한 형태이다.)

<meta name="viewport" content="width=device-width, user-scalable=no">

 

iOS

그런데 아이폰. 즉, iOS에서는 위의 태그로는 줌을 할 수 없도록 만드는 것이 불가능하다.

왜냐하면 언제나 줌을 허용하도록 iOS측에서 임의로 정책을 바꿨기 때문이다.

 

따라서 StackOverFlow 사이트에 검색하여 다음의 코드를 style태그 안에 붙여줬더니, 비활성되었다.

body {
  touch-action: pan-x pan-y;
}

How do you disable viewport zooming on Mobile Safari?