How to disable viewport zooming in iOS 11.3 safari?

Question

I ve tried all (yes all!!!) the solutions from this question and nothing seems to be working with iOS 11.3?

Did someone had success with preventing pinch to zoom with ios 11.3? PS: I know that there are good reasons not to prevent pinch zooming... . But I have no choice. Many Thanks in Advance and sorry for my English.

“*…and nothing seems to be woking*”. Good (says I, writing on an iPad). ;-) Pinch zoom is a great accessibility aid, so you should defend it. — RobG, Jun 26 '18 at 11:11
@RobG I know, I know ;-) ... . But customer is customer... . And sometimes they are ähhhh... resistant to any advice. — Friedrich Siever, Jun 26 '18 at 11:15
I (and no doubt everyone here) feel your pain. I offer the comment as support, not criticism. ;-) — RobG, Jun 26 '18 at 11:18
@RobG would having a setting in safari that allowed you to enable pinch to zoom be a better solution for everyone? Sometimes it is necessary to not allow pinch zoom to maintain functionality of a web based application. Not all of us want to build app only "accessible" through Apple's web store. — pathfinder, Feb 21 '19 at 05:13

Danny Yaroslavski · Accepted Answer · 2018-08-15T01:53:59.913

Note that most of these options break lots of functionality and are bad for accessibility etc, etc, but some applications, in particular multi-touch PWAs need to disable these features. Use at own risk.

With regards to the parent comment that they've tried all the solutions in the link, pay attention to the "Note that if any deeper targets call stopPropagation on the event, the event will not reach the document and the scaling behaviour will not be prevented by this listener."- this is key.

Adding this script tag works on iOS 11.3 Safari (tested on iPhone SE)

<script>
    document.addEventListener('touchmove',
        function(e) {
            e.preventDefault();
        }, {passive:false});
</script>

Of course, you'd then have to handle all touch inputs (which, if you're in need of a custom, multi-touch PWA, you really have to do anyway).

One caveat is that scrolling is disabled this way (maybe there's a workaround?) but when you are in need of a single screen PWA this is a plus.
Another caveat is that for PWA-like behaviour, the content itself needs to be at most
```
height:100%
```
That way the top and bottom bars in Safari (URL and bottom navigation) don't cut off any content (at least in portrait orientation).
One last caveat is that double-tap to zoom still functions in this mode. Best way to disable it is to set the following on a root node
```
touch-action:manipulation;
```
However, this only works when the root node is clickable, so add in an empty onclick handler to the element.

Lastly, because the node is now clickable, it may have that semi-transparent overlay for buttons you may not want, which can be hidden with
```
-webkit-tap-highlight-color: rgba(0,0,0,0);
```

How would you enable scrolling on specific divs? – phil_lgr Sep 17 '18 at 13:57 — phil_lgr, Sep 17 '18 at 13:57

score 2 · Answer 2 · answered Aug 20 '20 at 20:37

2

Just add the touch-action: pan-y style to the body tag. That should prevent zooming.

answered Aug 20 '20 at 20:37

Dmitry Sokurenko

6,042
4
32
53

How to disable viewport zooming in iOS 11.3 safari?

2 Answers2