Meta-tags for mobile – should they be used?

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/

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

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

It is used like this:

<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 might be interesting for you is A list Apart: "Put Your Content in My Pocket".