How do you disable viewport zooming on Mobile Safari?
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
Solution 1:
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" />
Solution 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.
Solution 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();
});