Disabling Viewport Zoom on iOS 14 Web Browsers

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.

Comments

[Ben Nadel]

Awesome! This worked for me. I had a Button element that I wanted to allow a user to tap in rapid succession. On iOS, it kept zooming in, meta-tags ignored. But, your tip fixed it!

[Carmelo]

Hi, thanks for the article, as of ios 14.6 this method seems not to work while double-tap to zoom; pinch to zoom is blocked.
Any ideas? Thanks

[jasperreddin]

Hi, just trying to clarify what you're referring to here.

Do you mean it doesn't work when the double-tap to zoom and pinch to zoom events are cancelled via Javascript?

[AgustinLaValla]

Thanks for the information. I was trying to find a way to handle that easily. Thanks