[Javascript] 확대 축소 막기 (모바일웹, 웹앱)

보통의 경우 특히 모바일웹상에서 확대 축소 막기는

기본적으로 meta 태그 속성을 사용하면 된다.

 

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

 

아래 태그로 수정한다. 

속성이름이 직관적이다.

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

 

 

하지만 안드로이드 웹앱의 경우 안드로이드 자체 네이티브 코드상으로 직접성으로 막을수 있도록 코드 속성을 아래와 같이 수정해 주면 된다.

 

 

웹뷰객체이름.getSettings().setSupportZoom(false);

웹뷰객체이름.getSettings().setBuiltInZoomControls(false);

 

 

더욱더 확실한 방법으로 javascript 이벤트 소스를 추가해주면 더 좋을 듯하다.

 

<script>
document.body.addEventListener('touchstart', function(e) {
  if ( (e.touches.length > 1) || e.targetTouches.length > 1) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  }
}, {passive: false});
</script>