Google Maps API 中的“meta viewport user-scalable=no”有啥意义
Posted
技术标签:
【中文标题】Google Maps API 中的“meta viewport user-scalable=no”有啥意义【英文标题】：What's the point of 'meta viewport user-scalable=no' in the Google Maps APIGoogle Maps API 中的“meta viewport user-scalable=no”有什么意义 【发布时间】：2011-09-17 20:55:23 【问题描述】：我使用的是 Google Maps javascript API V3，the official examples 总是让你包含这个元标记：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
我见过的大多数第 3 方示例也是这样做的。不过，我用它写了一个插件，我的一个用户told me it's preventing him from being able to zoom in and out on his mobile device。我没有用于测试的移动设备，而且我的搜索都没有发现任何有用的信息。
那么，标签的意义何在？我应该把它留在里面吗？我应该尝试检测浏览器代理并仅在桌面浏览器中显示它吗？
如果要查看插件，可以download it、browse the source或see a live example。
【问题讨论】：
顺便说一句，Chrome 在控制台中写道“无法识别和忽略“用户可缩放”键。”如果你使用它，即使是“是”值 - 哎呀，只是注意到我在“可缩放”中有一个“e”，好像它可以有“鳞片（一条龙）:-) 【参考方案1】：禁用用户可缩放（即双击缩放的能力）允许浏览器减少点击延迟。在启用触摸的浏览器中，当用户希望双击缩放时，浏览器通常会在触发点击事件之前等待 300 毫秒，等待用户是否会双击。禁用用户可缩放允许 Chrome 浏览器立即触发点击事件，从而提供更好的用户体验。
来自 Google IO 2013 会议 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s
更新：它不再是真的，<meta name="viewport" content="width=device-width"> 足以消除 300 毫秒的延迟
【讨论】：
另一方面，这不利于残疾用户的可访问性。我相信第 508 节指南规定用户必须能够放大 200%【参考方案2】：来自v3 documentation（开发者指南 > 概念 > 移动设备开发）：
android 和 ios 设备遵循以下
<meta>标签：<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />此设置指定地图应全屏显示，并且用户不应调整其大小。请注意，iPhone 的 Safari 浏览器要求将
<meta>标签包含在页面的<head>元素中。
【讨论】：
【参考方案3】：如果您的设计不是响应式的，则您根本不应该使用视口元标记。滥用此标签可能会导致布局损坏。你可以阅读这篇文章来了解为什么你不应该使用这个标签，除非你知道你在做什么。 http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
“user-scalable=no”还有助于防止 iOS 输入框出现放大效果。
【讨论】：
【参考方案4】：在许多设备（例如 iPhone）上，它会阻止用户使用浏览器的缩放。如果您有地图并且浏览器进行了缩放，那么用户将看到一个带有巨大像素化标签的大像素化图像。这个想法是用户应该使用谷歌地图提供的缩放。不确定与您的插件的任何交互，但这就是它的用途。
最近，正如@ehfeng 在他的回答中指出的那样，Android 版 Chrome（也许还有其他人）利用了这样一个事实，即没有原生浏览器在设置了这样的视口标签的页面上进行缩放。这使他们可以摆脱可怕的 300 毫秒触摸事件延迟，浏览器需要等待并查看您的单次触摸是否最终会成为双次触摸。 （想想“单击”和“双击”。）但是，当这个问题最初被问到时（2011 年），在任何移动浏览器中都不是这样。它只是增加了最近偶然出现的令人敬畏的东西。
【讨论】：
我认为它只会禁用放大 iphone、ipad.. safari 的东西。我的 android 只是忽略它（用户可扩展的部分，当然不是视口标签的其余部分） @Juan 这不仅仅是 iOS/Safari 的东西。例如，我敢打赌它是在 Chrome for Android 中实现的。但是，是的，视口的东西在许多 Android 2.X 浏览器中不起作用。 不要那样做。它使某些网站无法在 Firefox for Android（可能还有其他网站）上使用。您不能确定您的页面会在所有浏览器上正确显示，如果您取消缩放，一些用户将无法使用您的网站。刚刚超过 0.3 秒。雅虎科技就是一个例子，如果一个网站在 Firefox for Android 上无法读取，因为它无法缩放。 user-scalable=no 的另一个有趣的副作用是它修复了位置问题：Android 2.X 浏览器上的固定菜单（尽管您可以使用 -webkit-backface-visibility: hidden;）以上是关于Google Maps API 中的“meta viewport user-scalable=no”有啥意义的主要内容，如果未能解决你的问题，请参考以下文章
为啥“Google Maps”一书中的 Google Maps Directions API 示例对我不起作用？
Google Maps API v3 中的 Javascript 错误 (RefererDeniedMapError)