html - 移动元标签——应该使用吗？

Question

元标记“Viewport”、“MobileOptimized”和“HandheldFriendly”可用于向移动设备提供适当格式的 HTML 内容。这些标签是好东西吗？在许多情况下，它们看起来非常特定于平台，即使不是特定于平台(视口(viewport))，它们似乎也需要特定于设备的属性才能正常工作。

应该使用它们吗？何时何地使用它们合适？是否有替代方案(无需用户代理识别)？

注意:我一直在使用 CSS 媒体查询来实现移动支持，但这需要一些 UAR 才能优化字体大小。

Answer 1

简单的回答是:viewport 很好，其他的都...不太好。

视口(viewport)

viewport 是一个 widely supported de-facto standard - 最初由 Apple 为 iPhone 上的移动 Safari 创建，它已被几乎所有其他移动浏览器采用:Opera Mobile、iPhone、Android、Iris、IE、BlackBerry、Obigo、火狐

简单示例用例:在移动设备上使网站全宽:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

另外两个是“功能手机”的较旧的事实上的“标准”——它们通常太旧而无法支持 viewport:

手持友好

此标签最初用于在 AvantGo 浏览器中识别移动内容，但后来成为识别移动网站的通用标准。但是，尚不清楚哪些浏览器支持此元标记:

<meta name="HandheldFriendly" content="true"/> 

移动优化

这是 Windows 专有的元标记，最终也被用作识别移动内容的另一种方式。这个标签的缺点是必须给出一个特定的宽度。同样，不知道对这个标签的支持是什么:

<meta name="MobileOptimized" content="320"/> 

总结

使用 viewport 除非您需要支持不支持它的旧功能手机，在这种情况下，可能同时使用 HandheldFriendly 和 MobileOptimized - 但测试您的目标设备并找出。

Should they be used? Where and when is it appropriate to use them? Are there alternatives (without user-agent recognition)?

当你想要它们创建的效果时应该使用它们 - 通常，告诉手机使用什么默认缩放，控制重新调整大小等。这很好地解释了为什么你可能想要使用视口(viewport)，例如:http://davidbcalhoun.com/2010/viewport-metatag - 它还列出了您可以使用视口(viewport)设置的其他属性以及它们的作用。

在不使用这些元标记的情况下，它们实现这些效果的唯一方法是使用时髦的 JS 技巧 - 这会更慢，需要加载脚本，难以维护并且不可靠。不支持 viewport 的浏览器可能会有很多 bug 的 JS 接口(interface)来处理与 viewport 相关的东西；请参阅下面的 quirksmode 链接。

引用资料

• 有关整个主题的真正全面解释，请参阅 http://www.quirksmode.org/mobile/viewports.html 和 http://www.quirksmode.org/mobile/viewports2.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://davidbcalhoun.com/tag/mobileoptimized
• http://www.quirksmode.org/mobile/ & http://www.quirksmode.org/mobile/tableViewport.html
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/