Google Maps API中的'meta viewport user-scalable = no'有什么意义？ [英] What's the point of 'meta viewport user-scalable=no' in the Google Maps API

问题描述

我使用Google Maps JavaScript API V3和官方示例总是包含这个meta标签：

 < meta name = viewportcontent =initial-scale = 1.0，user-scalable = no/> 
  

我见过的大多数第三方示例也都这样做。然而，我使用它编写了一个插件，并且我的一个用户告诉我，这阻止了他能够在他的移动设备上放大和缩小。我没有移动设备进行测试，也没有任何搜索结果显示任何有用的信息。

因此，标签有什么意义？我应该放入吗？我应该尝试检测浏览器代理并仅在桌面浏览器中显示它吗？

如果您想查看该插件，可以下载它，浏览源或查看实例。在很多设备上（例如iPhone），它可以防止用户使用浏览器的缩放功能。

如果您有地图并且浏览器进行缩放，那么用户将会看到一个巨大的像素化图像，并带有巨大的像素化标签。这个想法是，用户应该使用谷歌地图提供的缩放。最近，@ehfeng在他的回答中指出，Chrome for Android（或许还有其他）已经利用了这样一个事实，即在设置了视口标签的页面上没有原生浏览器缩放。这使得他们可以摆脱浏览器需要等待的触摸事件的可怕的300毫秒延迟，并查看您的单键触摸是否会成为双触点。 （想想单击和双击）。但是，最初询问这个问题时（2011年），在任何移动浏览器中都不是这样。它只是增加了最近偶然出现的真棒。

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.

解决方案

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.

这篇关于Google Maps API中的'meta viewport user-scalable = no'有什么意义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！