How to Disable Viewport Zooming on Mobile Safari

How do you disable viewport zooming on Mobile Safari?

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

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

How to disable viewport zooming in iOS 11.3 safari?

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

Disable pinch zoom on IOS 13 safari

None, of the JavaScript solutions worked for me. What I did to fix the issue on IOS was to add the following CSS to each element that I wanted to prevent the default zoom action on.

touch-action: none;

---

Related Topics