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

Question

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

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

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

Answer 1

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

viewport是一种广泛支持的事实上的标准 - 最初由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 - 但是测试你的目标设备并找出答案.

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

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

他们只有其他方式来实现这些效果,而不使用这些元标记,是时髦的JS技巧 - 这将是更慢,需要脚本加载,难以维护,将是不可靠的.不支持的浏览器viewport可能会有很多错误的JS接口来与视口相关的东西; 请参阅下面的quirksmode链接.