我正在使用Google Maps JavaScript API V3,the official examples始终包含此元标记:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
我见过的大多数第三方例子都是这样做的。我写了一个使用它的插件,以及我的一个用户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。
答案 0 :(得分:100)
在许多设备(例如iPhone)上,它会阻止用户使用浏览器的缩放功能。如果你有一张地图并且浏览器进行了缩放,那么用户将看到一个带有巨大像素化标签的大像素图像。这个想法是用户应该使用谷歌地图提供的缩放。不确定与您的插件有任何交互,但这就是它的用途。
最近,正如@ehfeng在他的回答中所说,Chrome for Android(以及其他人)已经利用了这样一个事实,即没有本地浏览器缩放视频标签设置的页面。这使他们能够摆脱浏览器等待的触摸事件所带来的可怕300ms延迟,看看你的单次触摸是否会成为双重触摸。 (想想“单击”和“双击”。)但是,当最初询问此问题时(2011年),在任何移动浏览器中都不是这样。它刚刚增加了最近偶然出现的精彩内容。
答案 1 :(得分:38)
禁用用户可扩展(即,双击缩放的功能)允许浏览器减少点击延迟。在启用触摸的浏览器中,当用户希望双击进行缩放时,浏览器通常会在触发点击事件之前等待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毫秒的延迟
答案 2 :(得分:9)
来自v3 documentation(开发人员指南&gt;概念&gt;为移动设备开发):
Android和iOS设备尊重以下
<meta>
标记:<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
此设置指定地图应全屏显示,并且不应由用户调整大小。请注意,iPhone的Safari浏览器要求此
<meta>
标记包含在页面的<head>
元素中。
答案 3 :(得分:1)
如果您的设计没有响应,则不应使用视口元标记 。滥用此标记可能会导致布局中断。您可以阅读本文以获取有关为什么您应该使用此标记的文档,除非您知道自己在做什么。 http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
&#34;用户可扩展=无&#34;还有助于防止iOS输入框上的放大效果。