[mobile-safari] 뷰포트 확대 / 축소 사용 중지 iOS 10 이상 사파리?

iOS 10에서는 Safari에서 웹 페이지 크기 조정을 막을 수 있지만 더 많은 작업이 필요합니다. 카고 컬트 개발자들이 모든 뷰포트 태그에 “user-scalable = no”를 떨어 뜨리고 시각 장애가있는 사용자에게는 불필요하게 어려운 일이 발생하는 것을 막는 데 어려움이 있다고 생각합니다.

그럼에도 불구하고 Apple이 더블 탭 투 줌을 비활성화하는 간단한 (메타 태그) 방법이 있도록 구현 방식을 변경하고 싶습니다. 어려움의 대부분은 그 상호 작용과 관련이 있습니다.

다음과 같이 핀치 투 줌을 중지 할 수 있습니다.

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

더 깊은 대상이 이벤트에서 stopPropagation을 호출하면 이벤트가 문서에 도달하지 않으며이 리스너가 스케일링 동작을 막지 않습니다.

두 번 탭하여 확대를 비활성화하는 것도 비슷합니다. 이전 탭에서 300 밀리 초 이내에 발생하는 문서의 탭을 비활성화합니다.

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

양식 요소를 올바르게 설정하지 않으면 입력에 초점을 맞추면 자동 확대 / 축소가 수행되며 수동 확대 / 축소를 대부분 사용하지 않도록 설정했기 때문에 이제 확대 / 축소를 해제하는 것이 거의 불가능합니다. 입력 글꼴 크기가 16 픽셀 이상인지 확인하십시오.

기본 앱의 WKWebView 에서이 문제를 해결하려는 경우 위에 제공된 솔루션이 가능하지만 https : //.com/a/31943976/661418보다 나은 솔루션 입니다. 다른 답변에서 언급했듯이 iOS 10 베타 6에서 Apple은 이제 메타 태그를 기리는 플래그를 제공했습니다.

2017 년 5 월 업데이트 : pinch-zoom을 비활성화하는 오래된 ‘터치 스타트 길이 터치 터치’방법을보다 간단한 ‘check event.scale on touchmove’접근 방식으로 대체했습니다. 모든 사람에게 더 안정적이어야합니다.

답변

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

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

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);