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

Question

I m using the Google Maps JavaScript API V3 and the official examples always have you include this meta tag    lt meta name  viewport  content  initial-scale 1 0  user-scalable no    gt    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

User · Answer

From the v3 documentation  Developer s Guide  gt  Concepts  gt  Developing for Mobile Devices    Android and iOS devices respect the following  lt meta gt  tag   lt meta name  quot viewport quot  content  quot initial-scale 1 0  user-scalable no quot    gt   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  lt meta gt  tag be included within the page s  lt head gt  element

User · Answer

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.

User · Answer

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 amp v DujfpXOKUp8 t 1435s  Update  its not true anymore   lt meta name  viewport  content  width device-width  gt  is enough to remove 300ms delay

User · Answer

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

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

The answer is

Examples related to mobile

Examples related to google-maps-api-3

Examples related to viewport

Examples related to meta-tags

Tags