在Google Maps API中，“meta viewport user-scalable=no”的作用是什么？

Question

在Google Maps API中，“meta viewport user-scalable=no”的作用是什么？

mobilegoogle-maps-api-3viewportmeta-tags

106

我正在使用Google Maps JavaScript API V3，官方示例总是让你包含这个元标记：

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

我看到大多数第三方示例也这样做。虽然我编写了一个使用它的插件，但我的一个用户告诉我，它阻止他在移动设备上缩放地图。我没有移动设备进行测试，而我的搜索也没有发现任何有用的信息。

那么，meta viewport标签的作用是什么？我应该保留它吗？我应该尝试检测浏览器代理并仅在桌面浏览器中显示它吗？

如果您想查看该插件，可以下载、浏览源代码或查看实时示例。

- Ian Dunn

顺便提一下，如果您在控制台中使用Chrome写入“user-scaleable”键并且即使使用“yes”值也会收到“未识别和忽略”的消息 - 糟糕，我刚刚注意到“scaleable”中有一个“e”，好像它可以拥有“鳞片（一条龙）:-)” - George Birbilis

4个回答

52

禁用用户可缩放性（即双击缩放功能）可以让浏览器减少点击延迟。在触摸屏幕的浏览器中，当用户期望双击缩放时，浏览器通常会在触发单击事件之前等待300毫秒，以等待用户是否会双击。禁用用户可缩放性允许Chrome浏览器立即触发单击事件，从而提供更好的用户体验。

来自2013年Google IO大会的演讲 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

更新：现在不再适用，<meta name="viewport" content="width=device-width">足以消除300毫秒的延迟。

- ehfeng

1

另一方面，这对于残障用户的可访问性并不好。我相信第508节指南规定用户必须能够放大至200％。 - Graham Fowles

12

根据v3文档（开发者指南 > 概念 > 为移动设备开发）：

Android 和 iOS 设备会遵守以下 <meta> 标签：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
此设置指定地图应在全屏模式下显示，且不可由用户调整大小。请注意，iPhone 的 Safari 浏览器要求在页面的 <head> 元素中包含此 <meta> 标签。

- pcaisse

3

如果你的设计不是响应式的，就完全不应该使用视口meta标签。滥用这个标签可能导致布局混乱。除非你知道自己在做什么，否则不建议使用这个标签，可参考此文档：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho。

"user-scalable=no" 还可以帮助防止iOS输入框上的缩放效果。

- Horia Rudan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trott · Accepted Answer

在许多设备上（如iPhone），它会防止用户使用浏览器的缩放功能。如果您有一张地图，而浏览器完成缩放，则用户将看到一个大的像素化图像和巨大的像素化标签。这是因为用户应该使用Google Maps提供的缩放功能。不确定与您的插件是否有任何交互，但这就是它的存在意义。

最近，正如@ehfeng在他的答案中所指出的那样，Chrome for Android（以及其他浏览器）利用了设置了视口标签的页面上没有本机浏览器缩放的事实。这使他们摆脱了浏览器等待并查看您的单个触摸是否最终会成为双触摸的可怕300毫秒延迟。（想象“单击”和“双击”）。然而，在最初提出这个问题的时候（2011年），在任何移动浏览器中都不是真的。这只是最近出现的额外好处。