html – How do you disable viewport zooming on Mobile Safari?

The Question :

419 people think this question is useful

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

The Question Comments :
  • If you’re making a game, then possibly controlling zooming is valid. However in nearly all other cases it should be strongly discouraged. Unfortunately it has become standard practice for a lot of mobile developers. If a user wants to zoom in to be able to read text more easily etc. preventing them from doing so isn’t very nice.
  • We are disabling zoom on a mobile web based application. You can’t zoom in Native iOS apps and it’s not required in our web application. If your site or app is mobile optimised then your users won’t need to zoom. There are always use cases for disabling zoom. It doesn’t have to always be one way or the other.
  • Yea I’m not following the line of logic that disabling zoom on a mobile optimised site is a bad thing. What’s far worse is having the viewport accidentally pan around because the screen is picking up accidental pan and zoom input on a site that doesn’t require you to zoom anyway. Realistically if your users are needing to zoom into content on your mobile optimised site then the problem is the design, not the lack of zoom.
  • @NathanHornby: The problem of disabling zoom is a lack of respect of user’s preferences. Different users prefers different text sizes, younger audience with good eyesight might prefer to see more content, while audience with poor eyesight can’t use anything that doesn’t have giant text. Other people have Parkinsons but still have good eyesight, so they prefer extra large buttons but don’t benefit from large text in general.
  • @NathanHornby It doesn’t mean the designer has done something wrong necessarily. It simply means the user, for whatever reason, wants to zoom in. Pinch-zoom is a standard feature of all touch-screen phones. Any user who owns such a phone, knows how to use it. I know it’s an old question, but I still am constantly frustrated by know-all developers who insist on breaking the functionality of my phone because they think it makes their designs look better.

The Answer 1

747 people think this answer is useful

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

The Answer 2

172 people think this answer is useful

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.

The Answer 3

104 people think this answer is useful

@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();
});

The Answer 4

21 people think this answer is useful

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

The Answer 5

16 people think this answer is useful

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

The Answer 6

13 people think this answer is useful

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.

The Answer 7

11 people think this answer is useful
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.

The Answer 8

7 people think this answer is useful

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
}

The Answer 9

7 people think this answer is useful

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

The Answer 10

5 people think this answer is useful

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

The Answer 11

4 people think this answer is useful

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

The Answer 12

3 people think this answer is useful

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

The Answer 13

0 people think this answer is useful

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

The Answer 14

0 people think this answer is useful

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

The Answer 15

-1 people think this answer is useful

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>

The Answer 16

-3 people think this answer is useful

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

The Answer 17

-5 people think this answer is useful

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

Add a Comment