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.

Answer 1

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);