lundi 31 octobre 2016

How does one prevent pinch zooming on iOS 10 devices in safari?

Is there a way to successfully prevent pinch zooming in safari on all iOS devices including those running on version 10?

Viewport meta tag is being ignored:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

The above meta prevents pinch zooming on older iOS/Devices tested on iPhone 5 iOS 9.2 and this issue is not present. However when tested on an iPhone 6, 6+ version 10.0.1 and iPhone 7 10.0(14) this remains an issue.

From the iOS 10 beta 1 release notes:

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

I have tried:

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

Which seems to do the job ok if the user puts both fingers on the screen at the same time. But if you place one finger on the screen and then a second soon after you are able to pinch zoom. Note:event.preventDefault(); has been hit successfully as expected.

Side-note: Similar questions around e.g. How do you disable viewport zooming on Mobile Safari? but this question is aimed to directly tackle iOS 10 due to Apples change of specifications.




Aucun commentaire:

Enregistrer un commentaire