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.
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 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.|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1.0" />
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.
<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.
<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.
Apple created custom meta tags specific for their Safari browsers.
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" />
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" />
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" />