disable viewport zooming iOS 10+ safari?

Question

I've update my iPhone 6 plus to iOS 10 beta version and just found that in mobile safari, you can zoom any webpages by double tapping or pinching IGNORE the user-scalable=no code in the meta tag. I don't know whether it's a bug or feature. If it's considered as a feature, how do we disable viewport zooming iOS 10 safari ?

---

updated on iOS 11/12 release, iOS 11 and iOS 12 safari still DO NOT respect the user-scalable=no meta tag.

Answer 1

Unintentional zooming tends to happen when:

• A user double taps on a component of the interface
• A user interacts with the viewport using two or more digits (pinch)

To prevent the double tap behaviour I have found two very simple workarounds:

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

Both of these prevent Safari (iOS 10.3.2) from zooming in on the button. As you can see one is JavaScript only, the other is CSS only. Use appropriately.

Here is a demo: https://codepen.io/lukejacksonn/pen/QMELXQ

I have not attempted to prevent the pinch behaviour (yet), primarily because I tend not to create multi touch interfaces for the web and secondly I have come round to the idea that perhaps all interfaces including native app UI should be "pinch to zoom"-able in places. I'd still design to avoid the user having to do this to make your UI accessible to them, at all costs.

Answer 2

This is a new feature in iOS 10.

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 expect we're going to see a JS add-on soon to disable this in some way.

Answer 3

I've been able to fix this using the touch-action css property on individual elements. Try setting touch-action: manipulation; on elements that are commonly clicked on, like links or buttons.

Answer 4

Check for scale factor in touchove event then prevent touch event.

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

Answer 5

Found this simple work around which appears to prevent double click to zoom:

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

Answer 6

We can get everything we want by injecting one style rule and by intercepting zoom events:

$(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)'
    }
  })
})

✔ Disables pinch zoom.

✔ Disables double-tap zoom.

✔ Scroll is not affected.

✔ Disables tap highlight (which is triggered, on iOS, by the style rule).

NOTICE: Tweak the iOS-detection to your liking. More on that here.

---

Apologies to lukejackson and Piotr Kowalski, whose answers appear in modified form in the code above.