“元视口用户可扩展=否”的意义何在?在 Google 地图 API 中

发布于 2024-11-15 20:36:54 字数 950 浏览 4 评论 0原文

我正在使用 Google Maps JavaScript API V3 和官方示例< /a> 始终让您包含此元标记:

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

我见过的大多数 3rd-party 示例也这样做。不过,我使用它编写了一个插件,我的一个用户 告诉我,这使他无法在移动设备上放大和缩小。我没有可供测试的移动设备,并且我的搜索都没有显示任何有用的信息。

那么,标签有什么意义呢?我应该把它留在里面吗?我是否应该尝试检测浏览器代理并仅在桌面浏览器中显示它?

如果您想检查该插件,可以下载它,< a href="http://plugins.svn.wordpress.org/basic-google-maps-placemarks/tags/1.1.2/" rel="noreferrer">浏览来源 或 查看实例

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

撩人痒 2024-11-22 20:36:54

在许多设备(例如 iPhone)上,它会阻止用户使用浏览器的缩放功能。如果您有地图并且浏览器进行缩放,那么用户将看到带有巨大像素化标签的大像素化图像。这个想法是用户应该使用谷歌地图提供的缩放功能。不确定与您的插件是否有任何交互,但这就是它的用途。

最近,正如 @ehfeng 在他的回答中指出的那样,Android 版 Chrome(或许还有其他浏览器)利用了这样一个事实:没有本地浏览器可以缩放带有这样的视口标签设置的页面。这使他们能够摆脱触摸事件上可怕的 300 毫秒延迟,浏览器需要等待并查看单次触摸是否最终会变成双击。 (想想“单击”和“双击”。)但是,当这个问题最初被问到时(2011 年),在任何移动浏览器中都不是这样。它只是最近偶然出现的额外的令人惊叹的东西。

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.

我三岁 2024-11-22 20:36:54

禁用用户可缩放(即双击缩放的功能)可以让浏览器减少点击延迟。在支持触摸的浏览器中,当用户期望双击缩放时,浏览器通常会等待 300ms,然后触发单击事件,等待用户是否会双击。禁用用户可扩展功能可以让 Chrome 浏览器立即触发点击事件,从而获得更好的用户体验。

来自 Google IO 2013 会议
https://www.youtube.com/watch?feature=player_embedded& ;v=DujfpXOKUp8#t=1435s

更新:它不再正确了, 足以消除 300 毫秒的延迟

Disabling user-scalable (namely, the ability to double tap to zoom) allows the browser to reduce the click delay. In touch-enable browsers, when the user expects the double tap to zoom, the browser generally waits 300ms before firing the click event, waiting to see if the user will double tap. Disabling user-scalable allows for the Chrome browser to fire the click event immediately, allowing for a better user experience.

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

Update: its not true anymore, <meta name="viewport" content="width=device-width"> is enough to remove 300ms delay

守望孤独 2024-11-22 20:36:54

来自 v3 文档(开发人员指南 > 概念 > 移动设备开发):

Android 和 iOS 设备遵循以下 标记:

>

此设置指定地图应全屏显示,并且用户不应调整其大小。请注意,iPhone 的 Safari 浏览器要求将此 标记包含在页面的 元素中。

From the v3 documentation (Developer's Guide > Concepts > Developing for Mobile Devices):

Android and iOS devices respect the following <meta> tag:

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

This setting specifies that the map should be displayed full-screen and should not be resizable by the user. Note that the iPhone's Safari browser requires this <meta> tag be included within the page's <head> element.

我的黑色迷你裙 2024-11-22 20:36:54

如果您的设计不响应,您根本不应该使用视口元标记。滥用此标签可能会导致布局损坏。您可以阅读这篇文章来获取有关为什么不应该使用此标签的文档,除非您知道自己在做什么。
http://blog.javierusobiaga.com/stop -using-the-viewport-tag-until-you-know-ho

"user-scalable=no" 也有助于防止 iOS 输入框的放大效果。

You should not use the viewport meta tag at all if your design is not responsive. Misusing this tag may lead to broken layouts. You may read this article for documentation about why you should'n use this tag unless you know what you're doing.
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable=no" also helps to prevent the zoom-in effect on iOS input boxes.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文