뷰포트 확대 / 축소 사용 중지 iOS 10 이상 사파리?

나는 내 아이폰 6 플러스 아이폰 OS 10 베타 버전을 업데이트하고 바로 모바일 사파리, 당신은 두 번 눌러 모든 웹 페이지를 확대하거나 곤란 것으로 나타났습니다 무시user-scalable=no 메타 태그 코드를. 버그인지 기능인지 모르겠습니다. 기능으로 간주되면 뷰포트 확대 / 축소 iOS 10 사파리를 어떻게 비활성화합니까?

iOS 11/12 릴리스에서 업데이트되었지만 iOS 11 및 iOS 12 사파리는 여전히 메타 태그를 존중 하지 않습니다user-scalable=no .

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'접근 방식으로 대체했습니다. 모든 사람에게 더 안정적이어야합니다.

이것은 iOS 10의 새로운 기능입니다.

iOS 10 베타 1 릴리스 정보에서 :

• Safari에서 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트가 설정되어 있어도 사용자가 확대 / 축소 할 수 있습니다. user-scalable=no 가 뷰포트에 되어 .

JS 애드온이 곧 어떤 방법 으로든 이것을 비활성화 할 것으로 기대합니다.

touch-action개별 요소 에서 css 속성을 사용 하여이 문제를 해결할 수있었습니다 . touch-action: manipulation;링크 나 버튼과 같이 일반적으로 클릭되는 요소를 설정 하십시오.

이 동작은 최신 베타 버전에서 변경된 것으로 보이며, 작성 당시 베타 6입니다.

iOS 10 Beta 6 릴리스 정보 :

WKWebView이제는 기본적으로 user-scalable=no뷰포트를 기준으로합니다. 의 클라이언트는 WKWebView접근성을 개선하고 사용자가 WKWebViewConfiguration 속성 ignoresViewportScaleLimits을 로 설정하여 모든 페이지에서 확대 / 축소 할 수 있도록합니다 YES.

그러나 (매우 제한된) 테스트에서 아직 이것이 사실인지 확인할 수 없습니다.

편집 : 확인, iOS 10 Beta 6은 user-scalable=no기본적으로 나를 위해 존중 합니다.

이 글을 쓰는 시점에서 Mobile Safari에서 작동하는 해결 방법은 addEventListenerbe 의 세 번째 인수를 갖는 { passive: false }것이므로 전체 해결 방법은 다음과 같습니다.

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

당신은 할 수 있습니다 옵션이 지원되는 경우 확인 하위 호환성을 유지 할 수 있습니다.

더 강력한 자바 스크립트 옵션을 찾기 위해 약 1 시간을 보냈지 만 찾지 못했습니다. 지난 며칠 동안 hammer.js (Hammer.js는 모든 종류의 터치 이벤트를 쉽게 조작 할 수있는 라이브러리입니다)를 다루었 고 주로 내가하려는 일에 실패했습니다.

그 경고와 내가 자바 스크립트 전문가라는 것을 결코 이해하지 못한다면, 이것은 기본적으로 hammer.js를 사용하여 pinch-zoom 및 double-tap 이벤트를 캡처 한 다음 기록하고 버리는 솔루션입니다.

페이지에 hammer.js를 포함시킨 다음이 자바 스크립트를 머리에 붙이십시오.

< 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);

그러나 때로는 event.touches.length> 1 일 때 화면이 여전히 확대 되어 화면에서 손가락이 움직이지 않도록 touchmove 이벤트를 사용하는 것이 가장 좋습니다. 코드는 다음과 같습니다.

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

그것이 도움이되기를 바랍니다.

Touchove 이벤트에서 스케일 팩터를 확인한 후 Touch 이벤트를 방지하십시오.

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

하나의 스타일 규칙을 삽입하고 확대 / 축소 이벤트를 가로 채서 원하는 모든 것을 얻을 수 있습니다.

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ 핀치 줌을 비활성화합니다.

✔ 더블 탭 줌을 비활성화합니다.

✔ 스크롤은 영향을받지 않습니다.

✔ 탭 강조 표시를 비활성화합니다 (iOS에서는 스타일 규칙에 의해 트리거 됨).

주의 사항 : 원하는대로 iOS 감지 기능을 조정하십시오. 더 자세한 내용은 여기 를 참조하십시오 .

lukejackson 및 Piotr Kowalski 에게 사과하며 위 코드에서 답변이 수정 된 형태로 나타납니다.

나는 순진한 해결책을 생각해 냈지만 효과가있는 것 같습니다. 내 목표는 실수로 두 번 탭하는 것이 확대로 해석되는 것을 방지하는 동시에 손쉬운 확대 / 축소 기능은 접근성을 위해 작동하는 것입니다.

아이디어는 더블 탭에서 첫 번째 touchstart와 두 번째 사이의 시간을 측정 touchend한 다음 touchend지연이 너무 작은 경우 마지막 을 클릭으로 해석하는 것 입니다. 우연한 확대 / 축소를 방지하는 동안이 방법은 목록 스크롤을 영향을받지 않는 것 같습니다. 그래도 아무것도 놓치지 않았는지 확실하지 않습니다.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

mutewinter 의 요지 와 Joseph의 답변 에서 영감을 얻었습니다 .

필자의 경우 Babylon.js를 사용하여 3D 장면을 만들고 전체 페이지는 하나의 전체 화면 캔버스로 구성됩니다. 3D 엔진에는 자체 확대 / 축소 기능이 있지만 iOS에서는 핀치 투 줌이이를 방해합니다. 내 문제를 극복하기 위해 @Joseph 답변을 업데이트했습니다. 이를 비활성화하려면 이벤트 리스너에 옵션으로 {passive : false}를 전달해야한다는 것을 알았습니다. 다음 코드는 저에게 효과적입니다.

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

이상하게도 iOS 10.2의 Safari의 경우 요소 또는 조상 중 하나에 다음 중 하나가 있으면 이중 탭하여 확대 / 축소를 마술처럼 사용할 수 없습니다.

1. onClick 리스너-간단한 noop 일 수 있습니다.
2. cursor: pointerCSS 의 세트

다음과 같은 경우에 의도하지 않은 확대 / 축소 가 발생하는 경향이 있습니다.

• 사용자가 인터페이스 구성 요소를 두 번 탭
• 사용자가 둘 이상의 숫자 (핀치)를 사용하여 뷰포트와 상호 작용

더블 탭 동작 을 방지하기 위해 두 가지 매우 간단한 해결 방법을 찾았습니다.

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

이 두 가지 모두 Safari (iOS 10.3.2) 가 버튼 을 확대 하지 못하게 합니다. 보시다시피 하나는 JavaScript 전용이고 다른 하나는 CSS 전용입니다. 적절하게 사용하십시오.

데모는 다음과 같습니다. https://codepen.io/lukejacksonn/pen/QMELXQ

필자는 웹에 멀티 터치 인터페이스를 만들지 않는 경향이 있기 때문에 핀치 동작 (아직)을 방지하려고 시도하지 않았으며, 둘째로 네이티브 앱 UI를 포함한 모든 인터페이스가 "확대 / 축소"되어야한다는 생각으로 돌아 왔습니다. 장소에서 가능합니다. 나는 여전히 사용자 가 UI에 액세스 할 수 있도록하기 위해이 작업을 수행하지 않아도 되도록 설계하고 있습니다.

두 번 클릭하여 확대 / 축소하는 것을 방지하는이 간단한 해결 방법을 찾았습니다.

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

요청에 따라 사람들이 의견을 표명 할 수 있도록 의견을 답변에 전달했습니다.

이것은 iOS 13의 시간의 90 %에서 작동합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

과

<meta name="HandheldFriendly" content="true">

iOS (iPhone 6, iOS 10.0.2)의 페이지에서 실제로 위의 모든 답변을 확인했지만 성공하지 못했습니다. 이것은 내 작업 솔루션입니다.

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

이것은 나를 위해 일했다 :

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