mobile device에서 touch 시 zoom 방지 하는 방법

젠장.. GB같은 옛날 기기에서는 안된다..
-----------------------------------

보통 web page의 확대/축소를 방지하기 위해서 아래와 같이 viewport를 설정하는 방법을 많이 사용함.

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

하지만 일부 예전 device들 중에서는 제대로 되지 않는 경우가 있음.
이럴 때는 touch를 방지하는 방법으로 가능함.

http://stackoverflow.com/questions/8071603/safari-ipad-1-how-to-disable-zoom-centering-on-double-tap-but-keep-pinch-zoom

6down vote +100

There's no other way than catching the events you want to prevent, and call preventDefault() on them, as you had already more or less figured out. Indeed, some particular CSS properties / values may change the global site behavior (fixed width or fixed, for example), but you're not safe from changes to the OS (see fixedhandling change in iOS5), nor do these changes necessarily prevent all behavior (pinch might be off, but not double-tapping). So, the best way to disable default behavior only for double-tapping is to take advantage of the count of touches iOS provides: if we have only one contact, then we're tapping. Two, this means we're pinching. The following setup code provides that functionality: var elm = document.body; // or some selection of the element you want to disable var catcher = function(evt) { if (evt.touches.length < 2) evt.preventDefault(); }; elm.addEventListener('touchstart', catcher, true); Demo on jsFiddle. Note: the third parameter (true) to addEventListener means that we want to capture events, that is catch them all, even for our descendant children. share|improve this answer answered Nov 20 '11 at 6:35 MattiSG 1,082417

하지만 이렇게 되면 

전체 화면에서 touch가 먹지 않으므로 touch 필요한 버튼 같은 부분들에서는 문제가 발생그래서 touch가 된 html dom element를 확인하여 touch event를 허용, 취소 여부를 판단하는 코드를 추가함.

touch 필요한 dom element에 대해서는 class='button'와 같이 설정 하였음.

그래서 터치된 element의 class에 button이 포함 되어 있을 경우는 touch event가 전달 되고 그외에는 evt.preventDefault()로 인해서 touch event가 전달되지 않음.

var changedTouch = event.changedTouches[0];

var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);

if($(elem).attr('class').search("button") != -1){

   return;

}