Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 360
Ian Dunn Avatar asked Jun 18 '11 17:06

Ian Dunn


People also ask

What does user-scalable no do?

The user-scalable="no" parameter for the <meta name="viewport"> element disables browser zoom on a web page. The maximum-scale parameter limits the amount the user can zoom. Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page.

What is the purpose of viewport meta tag?

Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

What is user-scalable?

The user-scalable attribute defines whether users can scale (zoom) the page content on mobile. By default, scaling is on, but if user-scalable is set to '0' or 'no' then this will prevent users from zooming, which negatively affects user experience (in most cases).

Why is the viewport meta tag used when a web page is to be made responsive?

The HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.


2 Answers

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.

like image 101
Trott Avatar answered Sep 22 '22 02:09

Trott


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

like image 39
ehfeng Avatar answered Sep 20 '22 02:09

ehfeng