Mobile Meta Tags - Should They Be Used?

Question

The Viewport, MobileOptimized, and HandheldFriendly meta tags can be used to provide appropriately formatted HTML content to mobile devices. Are these tags good? In many cases, they seem quite platform specific, and even if they are not platform specific (viewport), they seem to require special device attributes to work properly.

Should they be used? Where and when is it advisable to use them? Are there alternatives (without recognizing user agents)?

Note. I use CSS multimedia queries to achieve mobile support, but this requires some UAR to optimize the font size.

Answer 1

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

viewport

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

A simple use case: make a site full width on a mobile device:

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

The other two are older “standards” for “feature phones”, which are usually too old to support viewport :

Handheldfriendly

This tag was originally used to identify mobile content in AvantGo browsers, but has become a common standard for identifying mobile websites. However, it is not known which browser range supports this meta tag:

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

MobileOptimized

This is a Windows-patented meta tag that also eventually came to be used as another means of identifying mobile content. The disadvantage of this tag is its specific width. Again, it is not known what support for this tag:

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

Summary

Use viewport if you don't need support for older phones with features that don't support it, in which case, probably use both HandheldFriendly and MobileOptimized, but check the target devices and find out .

Should they be used? Where and when is it advisable to use them? Are there alternatives (without recognizing user agents)?

They should be used when you want them to create effects - as a rule, tell phones what scale to use, control recalibration, etc. This is a good explanation of why you might want to use the viewport, for example: http://davidbcalhoun.com/2010/viewport-metatag - it also lists other properties that you can set using the viewport and what they do .

They are just another way to achieve these effects without using these meta tags - these are funky JS tricks that will be slower, require a script to load, will be difficult to maintain and will be unreliable. Browsers that do not support viewport are likely to have a very poor JS interface for widget-related materials; see links to quirksmode below.

References

• For a truly complete explanation of this whole subject, see http://www.quirksmode.org/mobile/viewports.html and 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/ and http://www.quirksmode.org/mobile/tableViewport.html li>
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Answer 2

IPhone uses Safari. They have a developer page that gives you some information on how to use the meta tag viewport:

For example, if your web page is less than 980 pixels, then you should set the width of the viewport to match your web content

It is used as follows:

<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" />

Another article that may be of interest to you is the list: Put your content in my pocket .