Mobile META Tags

Modified on 2010/06/24 21:26 by Administrator — Categorized as: Mobile

Mobile META tags can be used in XHTML-MP and HTML markup to tag the document as optimized for mobile devices. Mobile search engines, mobile browsers and even desktop web browsers look for mobile META tags to identify and render mobile-optimized markup.

Mainstream mobile web content is identified using the markup document’s DOCTYPE or document type declaration. If the DOCTYPE declares the document as XHTML-MP or WML, then by definition, the content is mobile-optimized.

Today’s advanced mobile devices and smartphones are capable of rendering HTML 4 and 5 markup (some with JavaScript and AJAX, too). Still, many mobile web developers prefer to deliver a mobile-optimized web experience to these devices. A lightweight and responsive full-HTML mobile web experience provides the best user experience across a mobile network and on the smartphone browser. Since a smartphone-optimized mobile web document uses the full tag set of HTML, its DOCTYPE is no longer the right criteria to use to decide whether the document is indeed optimized for mobile devices.

Mobile META tags can be incorporated into mobile-optimized HTML documents to identify the document as “made for mobile”. Here are several common mobile META tags and their interpretations by mobile browsers, mobile search engine spiders and robots.

The MobileOptimized META Tag

Microsoft invented the MobileOptimized META tag to control the layout width for mobile markup rendered in Internet Explorer Mobile (i.e. Pocket IE). The content of the meta tag is an integer width in pixels. In IE Mobile, the presence of this META tag forces a single-column layout at the specified width, preventing the browser from modifying the layout to “fit” the mobile screen. See this META tag reference at Microsoft for the tag’s interpretation in Windows Mobile 5. http://msdn.microsoft.com/en-us/library/ms890014.aspx

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

Some non-MS mobile browsers may also use the tag to force single-column layouts. Mobile browsers and mobile search engine spiders also use this META tag to identify mobile-optimized HTML.

The HandheldFriendly META Tag

The HandheldFriendly META tag was originally supported by AvantGo mobile browsers in Palm devices to identify mobile-optimized markup. Today, it is widely interpreted by mobile browsers and spiders as an indicator of mobile markup and a directive to display the web document without scaling. The value of the META tag is “true” for mobile markup and “false” for desktop-optimized HTML.

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

The Viewport META Tag

Many smartphone browsers scale Web pages to a wide viewport width, one appropriate for displaying desktop-optimized markup. These browsers allow the user to zoom in and out of scaled Web pages. For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels.

The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers. The presence of the Viewport META tag indicates that the markup document is optimized for mobile devices.

Here is a simplified version of the Viewport tag that sets the browser viewport width at 240 pixels and disables user scaling of the content:

<meta name="viewport" content="width=240,user-scalable=no" />

The content value of the Viewport META tag is a comma-delimited list of directives and their values.

This example <meta> tag lists all Viewport directives and example values:

<meta name="viewport" content="width=240, height=320, user-scalable=yes,initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

This table lists the meanings and values of all supported directives of the Viewport META tag.

Viewport META directive Example Value Description
width width=320 width=device-width Logical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device.
height height=480 height=device-height Logical height of the viewport, in pixels. The special device-height value indicates that the viewport height should be the screen height of the device.
user-scalable user-scalable=no Specifies whether the user can zoom in and out of the viewport, scaling the view of a Web page. Possible values are yes or no.
initial-scale initial-scale=2.0 Sets the initial scaling or zoom factor (or multiplier) used for viewing a Web page. A value of 1.0

displays an unscaled Web document.
maximum-scale maximum-scale=2.5 Sets the user’s maximum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
minimum-scale minimum-scale=0.5 Sets the user’s minimum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.

For more details about the possible directives and values of the Viewport META tag, see the Supported Meta Tags section of the Safari HTML Reference. http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Document

http://www.w3.org/TR/mwabp/#bp-viewport