用于移动设备的元标记-应该使用它们吗?


73

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

应该使用它们吗?何时何地使用它们合适?是否有其他选择(没有用户代理识别)?

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


似乎这不是问这个问题的正确地方;当我有这样做的意愿时,会将其发布在doctype上;)
brinxmat 2010年

视口似乎是我检查过的网站所使用的唯一标签。其他标签不是很多,但平台太多,您肯定会错过一种特定的设备格式。
里德·安东尼

Answers:


136

简单的答案是: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标签:

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

移动优化

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

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

概要

viewport除非需要支持不支持它的较早功能的手机,否则请使用该手机,在这种情况下,可能同时使用HandheldFriendly和MobileOptimized-但要测试目标设备并找出答案。

应该使用它们吗?何时何地使用它们合适?是否有其他选择(没有用户代理识别)?

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

他们不使用这些元标记而获得这些效果的唯一其他方法是使用时髦的JS技巧-速度会慢,需要脚本加载,难以维护且不可靠。不支持的浏览器viewport可能会具有非常多的JS界面来查看与视口相关的内容。请参阅下面的quirksmode链接。

参考文献


4

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 Apart:“将您的内容放在我的口袋中”。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.