手机元标签——应该使用吗？

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

应该使用它们吗? 何时何地适合使用它们? 是否有替代品(没有用户-代理识别) ？

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

55448 次浏览
小开

IPhone 使用 Safari 作为浏览器。他们有一个 开发者页面，可以提供一些信息，告诉你什么时候使用元标记视图:

例如，如果你的网页是 比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 Division: “ 把你的内容放进我的口袋”。

小开
最佳答案

简单的答案是: viewport是好的，其他的... 不太好。

视窗

viewport是一款 广泛支持的事实上的标准——最初由苹果为 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 标签:

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

移动优化

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

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

摘要

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

应该使用它们吗? 何时何地适合使用它们? 是否有替代品(没有用户-代理识别) ？

它们应该在你想要它们创建的效果时使用——一般来说，告诉手机使用什么默认缩放，控制调整大小等等。这是一个很好的解释为什么你可能想要使用 viewport，例如: http://davidbcalhoun.com/2010/viewport-metatag-它还列出了其他属性，你可以设置的 viewport 和他们做什么。

他们只有另一种方法来实现这些效果，没有使用这些元标签，是时髦的 JS 技巧-这将是较慢的，需要脚本加载，难以维护，并将是不可靠的。不支持 viewport的浏览器可能会有非常漏洞百出的 JS 接口来查看相关内容; 请参阅下面的离奇模式链接。

参考文献


提交答案