Is there a non-hacky way to prevent pinch zoom on

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

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

…in practice Safari doesn't honor it.

The ability to prevent viewport zooming is generally important for the experience of gaming on web and for tighter user experience around buttons, input boxes and slide in/out type of interfaces, even videos, while it remaining a good default for low vision readers. There is also a stripped down reader mode on iOS Safari that provides for uncluttered reading with desired accessibility features.

IMHO, applying accessibility principle aimed at low vision readers on every usecase of web is draconian. It is possible to fix pinch zoom using passive event listeners, but for 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 recent changes on iOS Safari, Apple appears to have bent the accessibility guidelines towards a CANNOT author conformance requirement instead for reasons only known to them. It is important that this difference between 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.

回答1:

From How do you disable viewport zooming on Mobile Safari?

Try adding the following to your head-tag:

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

additionally

<meta name="HandheldFriendly" content="true">

Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:

html {
    -webkit-text-size-adjust: none
}

回答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 sweep.