27

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.

Marvin Danig
  • 3,738
  • 6
  • 39
  • 71
  • Since iPadOS 16 (maybe sooner), a working solution is here: https://stackoverflow.com/a/59492869/418974 – Christian Bonato Mar 22 '23 at 00:28
  • The issue is that the vast majority of cases where pinch-to-zoom is disabled is websites written by people who don't know anything about UX. Overriding that and enabling pinch-to-zoom improves those sites. If the web weren't littered with such poorly-implemented sites, pinch-to-zoom wouldn't have to be forced on the infinitesimal minority of web apps (almost all videogames) where it should be disabled. – hegel5000 Aug 07 '23 at 21:34

2 Answers2

11

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

msand
  • 468
  • 4
  • 8
3

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.

Marvin Danig
  • 3,738
  • 6
  • 39
  • 71
  • 4
    The specific fix that inobounce uses is to pass `{ passive: false }` as the `options` parameter of the `addEventListener` method. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners – Josh Gallagher May 17 '18 at 17:28
  • 1
    inobounce does not prevent pinch to zoom when I open examples on the iOS 13 – Sergei Nov 20 '19 at 00:03