Html 移动元标签——应该使用它们吗？

Meta-tags for mobile – should they be used?

提问by brinxmat

Meta-tags "Viewport", "MobileOptimized" and "HandheldFriendly" can be used to provide appropriately formatted HTML-content to mobile devices. Are these tags good things? They seem pretty platform specific in many cases, and even when not platform specific (viewport), they seem to require device specific attributes in order to work properly.

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

Should they be used? Where and when is it appropriate to use them? Are there alternatives (without user-agent recognition)?

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

Note: I have been using CSS media queries to achieve mobile-support, but this requires some UAR in order to get optimize font size.

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

回答by Duncan Lock

The simple answer is: viewportis good, the others are... less good.

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

viewport

视口

viewportis a widely supported de-facto standard- originally created by Apple for mobile Safari on iPhone, it's been adopted by almost all other mobile browsers: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox

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

Simple example use case: make the site full width on mobile:

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

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

The other two are older de-facto 'standards' for 'feature phones' - which are generally too old to support viewport:

另外两个是“功能手机”的较旧的事实上的“标准”——它们通常太旧而无法支持viewport：

HandheldFriendly

手持友好型

This tag was originally used to identify mobile content in AvantGo browsers, but became a general standard for identifying mobile websites. However, it's unknown what range of browsers support this meta tag:

该标签最初用于识别 AvantGo 浏览器中的移动内容，但后来成为识别移动网站的通用标准。但是，尚不清楚哪些浏览器支持此元标记：

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

MobileOptimized

移动优化

This is a Windows-proprietary meta tag that also eventually became used as another means of identifying mobile content. The drawback with this tag is that a specific width must be given. Again, it's unknown what the support for this tag is:

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

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

Summary

概括

Use viewportunless you needto support older feature phones which don't support it, in which case, probably use both HandheldFriendly & MobileOptimized - but test your target devices and find out.

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

Should they be used? Where and when is it appropriate to use them? Are there alternatives (without user-agent recognition)?

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

They should be used when you want the effects they create - generally, telling phones what default zoom to use, controlling re-sizing, etc. This is a good explanation of why you might want to use viewport, for example: http://davidbcalhoun.com/2010/viewport-metatag- it also lists the other properties that you can set with viewport and what they do.

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

They only other way to achieve these effects, without using these metatags, is with funky JS tricks - which will be slower, require script loading, be difficult to maintain and will be unreliable. Browsers that don't support viewportwill probably have very buggy JS interface to viewport related stuff; see the quirksmode links below.

在不使用这些元标签的情况下，他们唯一实现这些效果的方法是使用时髦的 JS 技巧——这会更慢，需要脚本加载，难以维护并且不可靠。不支持的浏览器viewport可能会有很多错误的 JS 界面来查看与视口相关的东西；请参阅下面的 quirksmode 链接。

References

参考

• For a reallycomprehensive explanation of this whole subject, see http://www.quirksmode.org/mobile/viewports.html& http://www.quirksmode.org/mobile/viewports2.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://davidbcalhoun.com/tag/mobileoptimized
• http://www.quirksmode.org/mobile/& http://www.quirksmode.org/mobile/tableViewport.html
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

• 有关整个主题的真正全面解释，请参阅http://www.quirksmode.org/mobile/viewports.html& http://www.quirksmode.org/mobile/viewports2.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://davidbcalhoun.com/tag/mobileoptimized
• http://www.quirksmode.org/mobile/& http://www.quirksmode.org/mobile/tableViewport.html
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

回答by Martin Thoma

The iPhone uses Safari as a browser. They have a developer pagewhich gives you some information when to use the meta tag viewport:

iPhone 使用 Safari 作为浏览器。他们有一个开发人员页面，可以为您提供一些何时使用元标记视口的信息：

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content

例如，如果您的网页小于 980 像素，那么您应该设置视口的宽度以适合您的网页内容

It is used like this:

它是这样使用的：

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = device-width" />

<META name="viewport" content="width = device-width" />

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Another article that might be interesting for you is A list Apart: "Put Your Content in My Pocket".

您可能感兴趣的另一篇文章是 A list Apart：“将您的内容放入我的口袋”。