Quick Guide to Mobile Devices Meta Tags

Posted on Monday January 09, 2012 / by Eric Potvin

More and more people around the world use their smart phones to surf online. The numbers of "phone" users increase rapidly over the last couples of years and will keep increasing drastically. This is why it is important to make your website compatible to these mobiles devices.

Coding HTML and CSS changed significantly with mobiles devices. New tags can be use to automatically to display a more friendly version of a website without changing practically any code. These mobile meta tags can be use to easily detect the mobile browser and render an optimized content page to the user or consumer.

Meta elements are the HTML or XHTML <meta ... > element used to provide structured meta-data about a Web page. Multiple elements are often used on the same page: the element is the same, but its attributes are different. Meta elements can be used to specify page description, keywords and any other meta-data not provided through the other head elements and attributes.

source: http://en.wikipedia.org/wiki/Meta_element

The Viewport META Tag

The viewport meta tag is the most common tag used in displaying mobile optimize contents. This meta tag gives a more flexibility on the users browser by automatically detecting the device width and also give the ability to the user to zoom on a page or not.

Properties of viewport meta tag:

Viewport META directiveExample ValueDescription
widthwidth=320, width=device-widthLogical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device.
heightheight=480, height=device-heightLogical 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-scalableuser-scalable=noSpecifies 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-scaleinitial-scale=2.0Sets 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-scalemaximum-scale=2.5Sets 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-scaleminimum-scale=0.5Sets 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 example:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1.0" />

Custom Android properties

Android devices has special properties added to the meta tag. For example: target-densitydpi. This property allows developers to specify which screen resolution the page has been developed for.

<meta name="viewport" content="target-densitydpi=device-dpi" />

Read more at: http://developer.android.com/guide/webapps/targeting.html

Because viewport is relatively new, some old phones does not supports it. In this case, other meta tags can be used to display properly HTML content.

The HandheldFriendly Meta Tag

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

The HandheldFriendly meta tag was supported in Palm devices (AvantGo browsers) to identify mobile optimized content page. The value of the META tag is "true" for mobile content and "false" for desktop content.

The MobileOptimized Meta tag

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

The Internet Explorer Mobile default layout fits the page content to the Windows Mobile device screen. The Internet Explorer Mobile default fit-to-screen layout can be changed. Windows Mobile Standard has a Layout menu that enables users to select the Internet Explorer Mobile layout they want.

source: http://msdn.microsoft.com/en-us/library/bb431690.aspx

Apple Specific Meta Tag

Apple created custom meta tags specific for their Safari browsers.

apple-mobile-web-app-capable

This meta tag specify a web application runs in full-screen mode (iOS 2.1 and later).

<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style

This meta tag can set a customize style of status bar for a web application (iOS 2.1 and later).

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
format-detection

This meta tag enable or disable automatic detection of possible phone numbers in a webpage in Safari on iOS (iOS 1.0 and later).

<meta name="format-detection" content="telephone=no" />

source: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html