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

Ian Dunn picture Ian Dunn · Jun 18, 2011 · Viewed 175.1k times · Source

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.

Answer

Trott picture Trott · Jun 18, 2011

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.