移动设备的元标签 - 是否应该使用？ [英] Meta-tags for mobile – should they be used?

问题描述

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

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

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

解决方案

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

视口

视口 code>是广泛支持的事实标准 - 最初由苹果公司在iPhone上的移动Safari，它已被几乎所有其他移动浏览器采用：Opera Mobile，iPhone，Android，Iris，IE，黑莓，Obigo，火狐。

使用案例：在移动设备上制作网站全宽：

 < meta name =viewportcontent =width = device- width，initial-scale = 1.0/> 
  

另外两个是'功能手机'的老实实在在的'标准' - 通常也是这样旧支持视口：

手持式友情

标签最初用于识别AvantGo浏览器中的移动内容，但成为识别移动网站的通用标准。然而，不知道什么样的浏览器支持这个元标记：

 < meta name =HandheldFriendlycontent =true /> 
  

MobileOptimized

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

 < meta name =MobileOptimizedcontent =320/ > 
  

总结

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

是否应该使用它们？何时何地适合使用它们？有没有其他的选择（没有用户代理识别）？

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

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

参考

• 全面解释这整个主题，请参阅 http://www.quirksmode.org/mobile /viewports.html & http://www.quirksmode.org/mobile/viewports2.html


• https://developer.mozilla.org/ zh-CN / 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/

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.

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.

解决方案

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

viewport

viewport is 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

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:

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:

<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:

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

Summary

Use viewport unless you need to 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.

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.

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 viewport will probably have very buggy JS interface to viewport related stuff; see the quirksmode links below.

References

• For a really comprehensive 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/

这篇关于移动设备的元标签 - 是否应该使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！