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
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();
});
gesturestart
? dblclick?
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;
}
touch-action: pan-x pan-y
is unfortunately janky and broken. If you pinch repeatedly it will still zoom about 5% of the time.
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);
event.scale !== 1
event.scale !== undefined && event.scale !== 1
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
eval()
, so are there for disabling zooming. I am using it for a web-app that is used in combination with a Bluetooth scanner, to prevent the page zooming when a barcode is scanned.
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">
Success story sharing