How do you disable viewport zooming on Mobile Safari?

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

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.

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

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

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

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.

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

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.

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.

and the following rule to the CSS stylesheet

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

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
}

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

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

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

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

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

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>

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