javascript iOS 10 모바일웹 pinch-to-zoom issue (user-scalable)

http://hellomrma.com/wp/ios-10-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9-pinch-to-zoom-%EA%B8%B0%EB%8A%A5/

애플이 최근 iOS 10 업데이트를 제공했다.

일반적으로 pinch-to-zoom 기능을 이용하면 이미지나 웹사이트를 확대/축소 할 수 있다.
대부분의 모바일웹에서는 viewport 옵션에서 scale 을 고정 시킨다.

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

근데 이게 iOS 10 에서 기능이 먹히지 않는다.
구글링 해 보니,

iOS 10 beta release note.
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-to-zoom 을 사용 할 수 있다.
음 .. 레이아웃이 깨지지는 않는다. 다만, canvas 태그를 활용한 zoom-in-out 기능이 구현되어 있는 페이지에서는 오류가 발생할 가능성이 크다.

일반 static 페이지에서 해당 기능을 막는 방법은.

1 2 3 4 5

document.documentElement.addEventListener('touchstart', function (event) {   if (event.touches.length > 1) {     event.preventDefault();   } }, false);

참고 페이지
http://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari