-
[iOS] Safari에서 Pinch Zoom 막기(How to Disable the Pinch-to-Zoom)Programming/Javascript 2017. 4. 20. 01:23
참고 링크
how-do-you-disable-viewport-zooming-on-mobile-safari
how-to-disable-the-pinch-to-zoom-functionality-on-your-responsive-website/
Responsive Web이 등장하면서 더이상 모바일 환경에서 Zoom In/Out을 해야 할 필요를 못느끼게 되었고, 이에 따라 대부분의 사이트에서 meta tag를 활용하여 페이지에 대한 Zoom을 Disable 시키게 되었다.
How to Disable the Pinch to Zoom?
다음 코드를 추가하면 간단하게 Zoom In/Out을 막을 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
그런데...?
iOS 10의 새 기능으로 다음과 같이 추가되었다고 한다.
- To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets
user-scalable=no
in the viewport.
그렇다... user-scalable=no 임에도 불구하고 pinch zoom을 허용하라는 이야기이다. 역시나 최신 버전의 iOS에서는 zoom이 disable되어 있음에도 불구하고 Zoom In/Out이 가능하다.
이러한 정책이 어떻게 결정되었는지는 알 수 없지만, 개발자는 언제나 차선책을 강구해야만 하는.... 그런 존재가 아닐까. (
애플이 그렇다면..) 아무튼 stackoverflow의 답변에서 발췌한 javascript 코드를 통해 zoom을 disable하는 방법은 다음과 같다.1) Pinch Zoom 끄기
document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false);
2) Double tab Zoom 끄기
var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false);
1)의 경우 touchstart의 event를 받아 touch의 개수를 체크한 뒤, 1개 이상이면(pinch zoom일 경우) 이벤트를 무시하는 방법을 사용하고 있다.
2)의 경우 touchend 시점의 시간을 확인하여 300ms 이하면 이벤트를 무시하는 방법을 사용하고 있다.
테스트 확인 결과, 두 방법 모두 잘 작동하며 사이트의 UX에 맞게 적절히 사용하는 것이 바람직하다고 생각된다.
- To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets