How to disable pinch2zoom on webpages on iOS 10 Safari?

Question

It seems that:

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

… has stopped working on mobile Safari after the iOS 10 update.

Is there a way to disable pinch2zoom again?

Please do not respond with "don't do this, outdated accessibility gyan and how the scroll has worked for web" because you don't understand my users or my needs, and I don't want this thread to become yet another flamewar between old school web developers and the new generation.

I'm happy to use JavaScript to disable pinch2zoom sitewide.

score 0 · Accepted Answer · answered Aug 29 '17 at 19:18

For tap event:

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

For doubletap event:

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

Explanation is given on this answer.

How to disable pinch2zoom on webpages on iOS 10 Safari?

1 Answers1