Best IT Recipes

What is the "meta viewport user-scalable = no" point in the Google Maps API

I use the Google Maps JavaScript V3 API and official examples , you always include this meta tag:

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

Most of the third-party examples I've seen also do this. I wrote a plugin using it, although one of my users told me that this does not allow it to increase and increase on my mobile device , I do not have a mobile device for testing, and none of my searches found useful information.

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

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

+76
meta-tags mobile google-maps-api-3 viewport
Jun 18 '11 at 17:41
source share
4 answers

On many devices (such as the iPhone), it does not allow the user to use browser zoom. If you have a map and the browser zooms in, the user will see a large mirror image with huge pixel labels. The idea is that the user should use the scaling provided by Google Maps. Not sure about any interaction with your plugin, but what is it for?

More recently, as @ehfeng noted in his answer, Chrome for Android (and possibly others) took advantage of the fact that there is no browser native scaling on pages with the view view tag set in this way. This allows them to get rid of the terrible 300ms delay in touch events that the browser is waiting for and see if your single touch is a double touch. (Think “one click” and “double click.”) However, when this question was originally asked (in 2011), this was not true in any mobile browser. It just added the awesomeness that accidentally arose recently.

+88
Jun 18 '11 at 17:52
source share

Disabling the scalable user (namely, the ability to double-click on the zoom) allows the browser to reduce the delay of clicking. In touch-enabled browsers, when the user expects to double-tap the zoom, the browser usually waits 300 ms before the click event is triggered, waiting for the user to double-tap briefly. Disabling the scalable user allows the Chrome browser to instantly trigger a click event, which improves the user experience.

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

Update: it is no longer true, <meta name="viewport" content="width=device-width"> enough to remove the 300 ms delay

+27
Jun 04 '13 at 5:42 on
source share

From v3 documentation (Developer's Guide> Concepts> Mobile Development):

Android and iOS devices correspond to the following <meta> :

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

This parameter indicates that the map should be displayed in full screen mode and should not be changed by the user. Note that the iPhone Safari browser requires this <meta> included in the <head> element of the page.

+9
Jul 21 '13 at 17:53 on
source share

You cannot use the viewport meta tag at all if your design does not respond. Incorrect use of this tag may result in a layout disruption. You can read this article for documentation on why you should use this tag if you don't know what you are doing. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" also helps prevent the scaling effect for iOS input boxes.

+2
Sep 30 '14 at 9:19
source share


More articles:


All Articles