Question

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

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

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

Answer 1

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

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

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

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

另外两个是较旧的事实上的标准＆＃39;用于功能手机＆＃39; - 通常太旧而无法支持viewport：

此标记最初用于识别AvantGo浏览器中的移动内容，但却成为识别移动网站的通用标准。但是，不知道哪种浏览器支持这个元标记：

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

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

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

摘要

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

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

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

他们只有在不使用这些元标记的情况下实现这些效果的其他方法是使用时髦的JS技巧 - 这将更慢，需要脚本加载，难以维护并且不可靠。不支持viewport的浏览器可能会出现与视口相关的错误JS接口;请参阅下面的quirksmode链接。

参考

Answer 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”。