Is there a non-hacky way to prevent pinch zoom on iOS 11.3 Safari?

Question

I really want to disable pinch to zoom on my webpages (iframes) and use finger pinching events for another custom interaction. So while Apple in their documentation says that it supports the following clause:

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

…in practice their Safari browser on iOS and iPadOS does not honor it.

The ability to prevent viewport zooming is generally important for the experience of gaming on the web and for tight user experience near buttons, input boxes and slide-in/slide-out type of interfaces (think Tinder). Even on videos pinch-zooming is not required, but maybe pinchzoom can remain a good default on ereaders?

It is worth mentioning here that there is a stripped down reader mode on iOS Safari too, that provides for uncluttered reading with desired accessibility features.

IMHO, applying accessibility guideline aimed at low vision readers on every other use-case on the web is super draconian. While it is possible to disable pinchzoom using a passive event listener, but for the sake of hygiene, the question is: Is there a non-hacky way of doing it?

---

In a recent discussion with W3C/WCAG team it was clarified (emphasis mine) that the accessibility guidelines specify only…

a SHOULD NOT author conformance requirement that has been in the spec since 2016 arronei/html@877b59c. It is an author conformance requirement only, that does not forbid the use but does ask authors to consider seriously the curtailment of user's ability to zoom. What apple have done in safari is beyond the scope of this issue as it does not require anything of browser implementers.

With the recent changes on iOS Safari, Apple appears to have bent the accessibility guidelines towards a CANNOT author conformance for reasons best (;-)) known to them. It is important that this difference between the spec and implementation be highlighted here for the record.

---

Following discussions with the Apple iOS Safari team a bug was filed with webkit for this conformance issue here.

Answer 1

You can use touch-action: none on the html, body selector: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#none

https://github.com/msand/InfiniDraw/commit/b96aac5f8313f56da7be6f9e9f24648ab02fc444

Answer 2

While there isn't a non-hacky way to prevent pinchzoom, there is a hack that works on iOS 11.3 Safari still. At least for now. See inobounce that handles both rubber band behavior and pinchzoom in one fell sweep.