logo标签列表

移动设备的元标记-是否应该使用？

htmlmobile-website
79
标签中的“Viewport”、“MobileOptimized”和“HandheldFriendly”可以用于为移动设备提供适当格式化的HTML内容。这些标签是否好用呢？在许多情况下，它们似乎相当特定于平台，即使不是特定于平台（viewport），它们似乎也需要设备特定的属性才能正常工作。
它们应该被使用吗？在何时何地使用它们是合适的？是否有其他选择（无需用户代理识别）？
注意：我一直在使用CSS媒体查询来实现移动支持，但这需要一些用户代理识别以优化字体大小。
似乎这不是问这个问题的正确地方，我会在想要这样做时将其发布在 doctype 上 ;) - brinxmat
视口（Viewport）似乎是我检查过的网站中唯一使用的标签。其他标签并不那么常见，但由于有那么多平台，你很可能会错过某些特定的设备格式。 - Reed Anthony
2个回答
149

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

视口

视口是一个广泛支持的事实标准 - 最初由苹果为iPhone上的移动Safari创建，已被几乎所有其他移动浏览器采用：Opera Mobile、iPhone、Android、Iris、IE、BlackBerry、Obigo、Firefox。

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

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

另外两种是针对“功能手机”的老式事实“标准” - 通常太旧而无法支持viewport：

HandheldFriendly

最初使用此标签来识别 AvantGo 浏览器中的移动内容，但后来成为识别移动网站的一般标准。然而，目前尚不清楚哪些浏览器支持此元标记：

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

MobileOptimized

这是一个Windows专有的meta标签，后来也成为识别移动内容的另一种方式。这个标签的缺点是必须给出特定的宽度。同样，目前还不清楚对于这个标签的支持情况：

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

摘要

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

它们应该被使用吗？何时何地使用它们最合适？有没有其他替代方案（无需用户代理识别）？

当您想要创建它们所产生的效果时，应该使用它们——通常是告诉手机使用什么默认缩放比例，控制重新调整大小等。例如，这是一个关于为什么可能要使用viewport的好解释：http://davidbcalhoun.com/2010/viewport-metatag，它还列出了您可以使用viewport设置的其他属性以及它们的作用。

如果不使用这些元标记，唯一实现这些效果的方法是使用花哨的JS技巧——这将更慢，需要脚本加载，难以维护，并且不可靠。不支持viewport的浏览器可能会有与viewport相关的接口非常buggy的JS界面；请参见下面的quirksmode链接。

参考资料

4
iPhone使用Safari作为浏览器。他们有一个开发者页面，其中提供了一些关于何时使用meta标签viewport的信息：
例如，如果您的网页比980像素窄，则应将视口的宽度设置为适合您的Web内容。
它的使用方法如下： 另一篇可能对您有用的文章是A list Apart: "把你的内容放在我的口袋里。"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接