移动元标签——应该使用吗？答案

【问题标题】：Meta-tags for mobile – should they be used?移动元标签——应该使用吗？
【发布时间】：2010-12-31 14:29:13
【问题描述】：

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

应该使用它们吗？何时何地适合使用它们？是否有替代方案（没有用户代理识别）？

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

【问题讨论】：

这似乎不是问这个问题的正确地方；当我有这样做的冲动时，会在 doctype 上发布它；）
Viewport 似乎是我检查过的网站唯一使用的标签。其他标签不多，但平台太多，你一定会错过特定的设备格式。

标签： html mobile-website

【解决方案1】：

简单的答案是：viewport 很好，其他的……不太好。

视口

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

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

<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 - 但测试您的目标设备并找到出去。

应该使用它们吗？何时何地适合使用它们？是否有替代方案（没有用户代理识别）？

当您想要它们创建的效果时应该使用它们 - 通常，告诉手机使用默认缩放，控制重新调整大小等。这很好地解释了您可能想要使用视口的原因，例如：@ 987654322@ - 它还列出了您可以使用视口设置的其他属性以及它们的作用。

在不使用这些元标记的情况下，实现这些效果的唯一其他方法是使用时髦的 JS 技巧——这会更慢、需要脚本加载、难以维护并且不可靠。不支持viewport 的浏览器可能会有非常错误的 JS 接口来查看与视口相关的内容；请参阅下面的 quirksmode 链接。

参考

【讨论】：

【解决方案2】：

iPhone 使用 Safari 作为浏览器。他们有一个developer page，它会为您提供一些何时使用元标记视口的信息：

例如，如果您的网页是窄于 980 像素，那么你应该设置视口的宽度适合您的网络内容

它是这样使用的：

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = device-width" />

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

您可能感兴趣的另一篇文章是 A list Apart：“Put Your Content in My Pocket”。

【讨论】：