How do you disable viewport zooming on Mobile Safari?

Question

I've tried all three of these to no avail:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working

I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck.

---

UPDATE

Got this from Apple's site and it works:

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

it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops

Answer 1

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" />

Answer 2

For the people looking for an iOS 10 solution, user-scaleable=no is disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages.

From release notes:

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

So as far as I understand, we are sh** out of luck.

Answer 3

@mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

Answer 4

Using the CSS touch-action property is the most elegant solution. Tested on iOS 13.5 and iOS 14.

To disable pinch zoom gestures and and double-tap to zoom:

body {
  touch-action: pan-x pan-y;
}

If your app also has no need for panning, i.e. scrolling, use this:

body {
  touch-action: none;
}

Answer 5

for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

Answer 6

I got it working in iOS 12 with the following code:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passive option set to false.

Answer 7

I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.

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

and the following rule to the CSS stylesheet

html {
 -webkit-text-size-adjust: none;
 touch-action: manipulation;
}

Answer 8

Actually Apple disabled user-scalable=no on latest iOS versions. I tried as guideline and this way can work:

body {
  touch-action: pan-x pan-y;
}

Answer 9

user-scalable=0

This no longer works on iOS 10. Apple removed the feature.

There is no way yo can disable zoom website on iOS now, unless you make gross platform app.

Answer 10

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
}

Answer 11

This works fine in IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

thank you @arthur and @aleclarson

Answer 12

sometimes those other directives in the content tag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is.

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

Answer 13

In Safari 9.0 and up you can use shrink-to-fit in viewport meta tag as shown below

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Answer 14

As mentioned this solution basically works as of late 2020:

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

But the downside is that while you are scrolling you'd still be able to pinch and then it gets stuck. The solution is to disable scrolling.

body {
    overflow: hidden;
}

But, what if you still wanted the page to be scrolled? You can still do it with another <div> set as overflow:auto:

<body>
    <div id='app'></div>
</div>

and then

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

Answer 15

I tried all above things but this worked for me on IOS devices:

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

Answer 16

As of today (Oct. 2022) with iOS 14.8, the ONLY way I could completely prevent the double tap zoom was this:

document.addEventListener("click", (e) =>
        {
            e.preventDefault();
        })

Even this:

* {
    touch-action: none !important;
}

(which is obviously not realistic, but just for demonstration purposes) wasn't enough in every case. It turned out that any for element on which I had handled click, double tapping on it would cause a nearly irreversible zoom-in, completely ignoring the touch-action setting. But if I called preventDefault() in the click handler, it would not zoom. So, doing this at the document level so far seems to be enough, so that I don't have to do it every time I handle click.

I have no idea what side effects this might have, but I'm sure folks will chime in if they think of any.

Answer 17

2023 Update: on accessibility and the current state of Safari IOS

We had an auto-zoom issue with an input focus in a form, in Safari iOS. Solving the issue turned out to be more complex that we expected.

Quoting @haltersweb below:

"In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA"

If the accessibility requirements don't sway you, the 9 point penalty incurred in Google Lighthouse for accessibility requirements violations — with the corresponding SEO downgrade – will give you some pause. Yes, Chrome Mobile is affected. Do not disable pinch zoom.

There are a couple of ways to deal with this issue that we tested and work (kudos to Rick Strahl for his research and blogpost):

• Make sure that your input fields have font-size: 16px or greater.
• Use maximum-scale=1 in the viewport meta tag selectively for iOS Safari.

Although the second solution sounds promising and we didn't want to deal with changing the design of the inputs, getting the font-size to 16px is the appropriate way to deal with this. It is always better to abstain from introducing hacks that in the end, you'll have to maintain for many years, and that will come with unintended consequences.

Answer 18

I foolishly had a wrapper div which had a width measured in pixels. The other browsers seemed to be intelligent enough to deal with this. Once I had converted the width to a percentage value, it worked fine on Safari mobile as well. Very annoying.

.page{width: 960px;}

to

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Answer 19

In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA). You can read more about it here: Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

Answer 20

This one should be working on iphone etc.

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