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.
<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=320width=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=480height=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.
Subscribe to
Nice article,
I am wondering the trends of these meta tags. Which tag is getting higher adoption than others.
And do u think media queries is a possible substitution for this meta tags?
Media queries aren’t widely supported on mobile devices. They will work on some smartphone browsers but have little or no support among featurephones. I wouldn’t rely on media queries.
As for trending, I can say that all of these meta tags are widely documented as indicators of mobile content. Smartphone browsers that support zooming content support at least one of the Viewport and MobileOptimized tags. (Advantage to Viewport, IMO, because of adoption on iPhone and trickle-down to other browser vendors.) Both should be embedded into mobile markup intended for smartphones.
Thanks for the post.
One question, if I code the page in a mobile-optimized way, can the same page be used for regular computer browser?
Many thanks
Adding META tags intended for mobile browsers shouldn’t affect its display on desktop browsers. If a desktop browser doesn’t understand the VIEWPORT tag, for example, then it silently does not re-scale the page. However, if by “mobile-optimized”, you mean changing the page’s MIME type to be “application/xhtml+xml” or another mobile-appropriate content type, then yes, this could affect its display in a desktop browser.
Thanks for your prompt response, Gail. I was just wondering if a company does need to duplicate effort (e.g., create the same content twice) just to “fit” different internet users/customer (e.g., desktop / mobile). That sounds like it’s not necessary.
Thanks again.
My opinion is that if a company wants to reach a mobile audience, it must provide a mobile-optimized Web experience, even for smartphones. (In fact, that’s the premise of the book I just published – see the sidebar for a link.) If you have ever tried to surf the desktop-optimized web on a mobile device, even a device as capable as the iPhone or an Android model, you’ll notice that panning and zooming around a view of 5% of the Web page is a poor user experience. Not to mention the burden on the mobile network and mobiel browser of downloading and rendering the huge file sizes of desktop-optimized Web pages (1 MB+, considering linked images, videos, stylesheets, javascript libraries, etc).
Hi Gail,
I understand the use and advantage of this meta tag, but i have a question here. Can i add these meta tags in my html pages and navigate to those html pages using the DTM_NAVIGATE message present in htmlView.dll. Will these tags still work to give a mobile optimized views? Or is there any other way to make these tags work without actually opening it in the IE Mobile .
I don’t quite understand your question. Would you provide more information, please? These META tags provide hints to the browser for rendering mobile-optimized Web content. How do you envision “making these tags work” without actually opening the browser window? If you are asking about using IE Mobile as a control in a Windows Mobile application vs. running the IE Mobile browser application, the two are likely to have the same support for META tags, but only on-device testing would definitively prove this to be true.
Thanks for your reply. Yea my question is about using IE mobile as a control in a Windows Mobile Application vs running on the IE Mobile browser. After experimenting I found that the meta tags do not work when i use htmlView.dll for opening the html page (which i assume internally uses IE browser) . So i wanted to ask if you could suggest something that why it would be happening or is it something wrong that I am doing. If you require further clarification please let me know.
I am concern about the use of viewport tag as some of the phones are capable of switching the orientation (e.g. iPhone, Moto Droid). When that happens, width=320 might limit the phone from using the landscape width of 480 (iPhone).
Good question. Does the Windows Mobile SDK documentation specifically mention that htmlView.dll contains the exact same browse experience as IE Mobile? On some devices, I have noticed capability differences between a browser control and a browser application, with the former being a pared-down version of the latter. Sounds like you found another device where this is the case. There may be ways to programmatically set the scaling for the browser control. I suggest you scour the Windows Mobile SDK documentation to learn the browser control capabilities and find workarounds. Best of luck!
Hi Alvin, for browsers that switch orientation (or for re-usable markup that works on any browser supporting the Viewport meta tag) use the special device-width and device-height variables, as in:
<meta name="viewport" content="width=device-width,user-scalable=no" />The example above sets the viewport width to the device’s screen width, whatever value it takes in the current orientation.
Hi Gail,
I have one query, lots of operator sites doesn’t specify any of these tag and still want the page should be treated as a mobile page(as the contents are written for these smart phones only). So in this scenario we should treat such kind of pages as regular Desktop pages.
Are there any means of identifying whether the pages are specified for Mobile or not?
I believe we shouldn’t decide on the basis of DOCTYPE.
Regards,
Manish Gurnaney
Hi Manish,
When the doctype is XHTML-MP or WML, then DOCTYPE is a valid criteria for determining whether markup is intended for mobile devices. When the doctype is HTML or XHTML, then it doesn’t convey any information about optimizations. That’s why these META tags are used – to mark a generic HTML document as intended for mobile browsers. Other means to identify whether HTML markup is mobile-optimized is by inspecting the document size (under 10k – probably renders OK on mobile), page weight (combination of document + dependent resources like JavaScript libraries, CSS, etc – look for # of dependent resources, total size and standards-adherence in each resource) and usage of HTML tags known not to play well in mobile browsers (i.e. iframe and frame elements).
Thanks Gail, these tags working on all mobile browsers. I’m designing theme for mobile web site and i’m testing it sybian os with nokia mobile phones.
Hi Gail,
Is it possible to disable the touch scrolling in IE Mobile 6 on a Windows Mobile 6.5 Professional PPC device? Are there META tags for this? I can’t seem to get my signature capture component to function properly in IE due to the touch/gesture scrolling feature in this version of IE. I cannot find a way to shut it off either. Thanks in advance for your help!
/Matt
Hi,
I’ve problems with initial-scale property on Android OS (on a Samsung Galaxy S) : in the browser settings, there is a default zoom value (Far | Medium | Close). This value seems to override the initial-scale value, it’s very difficult in my project beacause I need to disable user-scale.
Is anybody have an idea on this subject ?
Hi Gail,
Thanks for good article. Can i use initial-scale to less than 1.0? because i used initial-scale=0.25, maximum-scale=2.0 but initial-scale is not working where’s maximum-scale working fine.
Waiting for reply.
Thanks.
Clear, concise, correct. Awesome entry! Thank you very much for sharing this useful info.