To "User-Scalable=No" or Not to "User-Scalable=No"

To user-scalable=no or not to user-scalable=no

You don't need to use user-scalable=no for responsive web design. You use it if you want your web app to feel more like a native app (in terms of zooming). You can control that users wont break your design if they zoom in. But technically, if you're doing responsive and your design breaks when zooming in, then you're not doing it right.

But, if you absolutely need to use it: "... however keep in mind that zooming is an important accessibility feature that is used by a lot of people. Turning it off should therefore only happen when really necessary, such as for certain types of games and applications."
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

What's the point of 'meta viewport user-scalable=no' in the Google Maps API

On many devices (such as the iPhone), it prevents the user from using the browser's zoom. If you have a map and the browser does the zooming, then the user will see a big ol' pixelated image with huge pixelated labels. The idea is that the user should use the zooming provided by Google Maps. Not sure about any interaction with your plugin, but that's what it's there for.

More recently, as @ehfeng notes in his answer, Chrome for Android (and perhaps others) have taken advantage of the fact that there's no native browser zooming on pages with a viewport tag set like that. This allows them to get rid of the dreaded 300ms delay on touch events that the browser takes to wait and see if your single touch will end up being a double touch. (Think "single click" and "double click".) However, when this question was originally asked (in 2011), this wasn't true in any mobile browser. It's just added awesomeness that fortuitously arose more recently.

Chrome ignores user-scalable=no meta tag

According to the Google Map documentation,

Android and iOS devices respect the following <meta> tag:

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

This setting specifies that the map should be displayed full-screen and should not be resizable by the user. Note that the iPhone's Safari browser requires this tag be included within the page's element.

Desktop computers do not respect the user-scalable attribute, though mobiles will.

If you want to prevent zoom in Chrome on desktop computers, your best bet would be to enable kiosk mode with the following startup arguments:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0

User-Scalable meta attribute not working

Unfortunately there is no easy way workable solution yet (as of moment of writing this). iOS simple ignores user-scalable.
Btw, this seems like duplicated question. Please see :
disable viewport zooming iOS 10+ safari?

Meta viewport tag user scalable=no ignored in Android 6.0+, Chrome version 53?

You probably have "Force enable zoom" checked in Settings>Accessibility. user-scalable=no works correctly for me in Chrome M53.

What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

They are viewport meta tags, and is most applicable on mobile browsers.

width=device-width

This means, we are telling to the browser “my website adapts to your device width”.

initial-scale

This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.

maximum-scale

Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won’t allow the user to zoom.

minimum-scale

Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scale is large, and you want to set minimum-scale.

user-scalable

User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out.

But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.

---

Related Topics