104

I'm using the Google Maps JavaScript API V3 and the official examples always have you include this meta tag:

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

Most of the 3rd-party examples I've seen also do it. I wrote a plugin using it, though, and one of my users told me it's preventing him from being able to zoom in and out on his mobile device. I don't have a mobile device to test with, and none of my searches revealed any helpful information.

So, what's the point of the tag? Should I leave it in? Should I try to detect the browser agent and only show it for desktop browsers?

If you want to examine the plugin, you can download it, browse the source or see a live example.

jeff
  • 8,300
  • 2
  • 31
  • 43
Ian Dunn
  • 3,541
  • 6
  • 26
  • 44
  • btw, Chrome writes in the console "The key "user-scaleable" is not recognized and ignored." if you use it, even with "yes" value - OOPS, just noticed I have an "e" in "scaleable", as if it can have "scales (a dragon) :-) – George Birbilis Oct 24 '16 at 14:38

4 Answers4

110

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.

Trott
  • 66,479
  • 23
  • 173
  • 212
  • i think it only disables zooming in iphone, ipad.. safari stuff. my android just ignores it (the user-scalable part, not the rest of the viewport tag of course) – chesscov77 Apr 18 '13 at 14:40
  • @Juan It's more than just iOS/Safari stuff. I'd bet it is implemented in Chrome for Android, for example. But yes, the viewport stuff doesn't work in many Android 2.X browsers. – Trott Apr 18 '13 at 15:54
  • 2
    Don't do that. It makes some websites unusable on Firefox for Android (and maybe others). You can't be sure that your page is going to display correctly on all browsers, and if you remove zooming, some users won't be able to use your site. Just over 0.3 seconds. Yahoo Tech is one example if a site that is unreadable on Firefox for Android because it can't be zoomed. – R891 Jun 13 '15 at 09:03
  • one more interesting side effect of user-scalable=no is that it fixes problems with position:fixed menus on Android 2.X browsers (though you could use -webkit-backface-visibility: hidden;) – Christian Butzke Sep 02 '15 at 03:24
51

Disabling user-scalable (namely, the ability to double tap to zoom) allows the browser to reduce the click delay. In touch-enable browsers, when the user expects the double tap to zoom, the browser generally waits 300ms before firing the click event, waiting to see if the user will double tap. Disabling user-scalable allows for the Chrome browser to fire the click event immediately, allowing for a better user experience.

From Google IO 2013 session https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Update: its not true anymore, <meta name="viewport" content="width=device-width"> is enough to remove 300ms delay

Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
ehfeng
  • 3,807
  • 4
  • 33
  • 42
  • 1
    on the other hand this isn't good for accessibility for disabled users. I believe that section 508 guidelines specify that a user must be able to zoom in up to 200% – Graham Fowles Jan 01 '16 at 14:57
11

From the v3 documentation (Developer's Guide > Concepts > Developing for Mobile Devices):

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 <meta> tag be included within the page's <head> element.

Community
  • 1
  • 1
pcaisse
  • 754
  • 2
  • 11
  • 19
3

You should not use the viewport meta tag at all if your design is not responsive. Misusing this tag may lead to broken layouts. You may read this article for documentation about why you should'n use this tag unless you know what you're doing. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable=no" also helps to prevent the zoom-in effect on iOS input boxes.

Richard
  • 4,740
  • 4
  • 32
  • 39
Horia Rudan
  • 178
  • 10