Disabling Viewport Zoom on iOS 14 Web Browsers

jasperreddin — Sun, 11 Apr 2021 20:13:52 +0000

I recently answered a question on Discord on how to disable double-tap to zoom on iOS browsers. I looked this problem up on Google, and most people said to use the viewport meta tag. Except that was four years ago and it seems that Safari no longer respects those tags.

Many are using Javascript to solve this, but that could be unreliable in many ways.

But now, since Safari 13, there is a way to disable viewport zooming.

body {
  touch-action: pan-y;
}

What the touch-action property does is it disables all touch events going to the selected element(s) except for the value specified. So by setting the property to pan-y for the whole body, we're only letting the user pan up and down, no matter where they initiate the touch. Any other touch events, whether it be a double tap, a pinch, or even a pan left or right, will be ignored.

You can read more about the touch-action CSS property here

If you need to allow the user to pan both up or down and left or right, you can add pan-x:

body {
  touch-action: pan-y, pan-x;
}

If you have just pan-y turned on in your body selector, and you have smaller viewports inside your document where there will be horizontal scrolling, you can override the property value in the child element.

.childViewPortElement {
  overflow: scroll;
   ...
  touch-action: pan-y, pan-x;
}

Fair Warning

In my testing I found out that on iOS, viewport zoom is fully disabled when the touch-action property is restricted like this. This applies even to automatic zooms that the browser performs, such as when the user taps on a text box with a font size smaller than 16px.

However, if even one element in the body has touch-action set to pinch-zoom or manipulation the browser will perform automatic zooms when tapping on small text boxes.

So be mindful of that, if you do have to enable manipulation or pinch-zoom events.

Forem: jasperreddin

Disabling Viewport Zoom on iOS 14 Web Browsers

Fair Warning