Google Maps API中的“元视口user-scalable = no”有什么意义？

98

我使用的是Google Maps JavaScript API V3，而官方示例始终都包含此meta标签：

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

我见过的大多数第三方示例也都这样做。不过，我使用它编写了一个插件，我的一个用户告诉我，这阻止了他无法在移动设备上放大和缩小。我没有可测试的移动设备，而且我的搜索都没有发现任何有用的信息。

那么，标签的目的是什么？我应该留在里面吗？我是否应该尝试检测浏览器代理，仅将其显示在桌面浏览器上？

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

— 伊恩·邓恩
source

顺便说一句，Chrome在控制台中写道“无法识别和忽略键“用户可扩展”。如果您使用它，即使它的值为“ yes”-OOPS，也只是注意到我在“ scaleable”中有一个“ e”，好像它可以有“ scales（a dragon）:-)

— George Birbilis

110

在许多设备（例如iPhone）上，它阻止用户使用浏览器的缩放。如果您有地图，并且浏览器进行了缩放，则用户将看到带有大像素像素标签的大像素像素图像。这个想法是用户应该使用Google Maps提供的缩放功能。不确定与插件的任何交互，但这就是它的作用。

最近，正如@ehfeng在回答中指出的那样，适用于Android的Chrome浏览器（可能还有其他浏览器）已经利用了以下事实：没有本机浏览器缩放带有这样的视口标签的页面。这使他们摆脱了浏览器需要等待的触摸事件上可怕的300ms延迟，看看您的单点触摸最终是否会变成双点触摸。（请考虑“单击”和“双击”。）但是，最初问这个问题（2011年）时，在任何移动浏览器中都并非如此。只是最近才出现的令人敬畏的东西而已。

— 特罗特
source

我认为这只会禁用iphone，ipad的缩放功能。我的android只是忽略了它（用户可缩放的部分，当然不是视口标记的其余部分）

— 2013年

@Juan不仅仅是iOS / Safari的东西。我敢打赌，例如，它是在Android版Chrome浏览器中实现的。但是，是的，视口功能在许多Android 2.X浏览器中均不起作用。

— Trott

1

不要那样做这使得某些网站无法在Firefox for Android（甚至其他网站）上无法使用。您无法确定页面将在所有浏览器上正确显示，并且如果您删除缩放功能，某些用户将无法使用您的网站。刚刚超过0.3秒。如果某个网站因无法缩放而无法在Firefox for Android上读取，则Yahoo Tech是一个示例。

— 2015年

user-scalable = no的另一个有趣的副作用是它解决了位置问题：Android 2.X浏览器上的固定菜单（尽管您可以使用-webkit-backface-visibility：hidden;）

— Christian Butzke

46

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

从Google IO 2013会话 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

更新：它不再<meta name="viewport" content="width=device-width">是真的，足以消除300ms的延迟

— 埃丰
source

另一方面，这不利于残障用户的可访问性。我相信第508条指南规定用户必须能够放大200％

— Graham Fowles

9

从v3文档（开发人员指南>概念>为移动设备开发）：

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

— stank345
source

3

你不应该使用视meta标签在所有如果你的设计没有响应。滥用此标签可能会导致布局损坏。您可以阅读本文以获得有关为什么不知道使用此标记的原因的文档。 http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

“ user-scalable = no”还有助于防止在iOS输入框上放大效果。

— 霍里亚·鲁丹
source