The skinny
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Introduction
This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web. It assumes at least a basic knowledge of creating desktop websites.
The problem
Ok, so you’ve settled down to learn how to write a website for a mobile device using your current knowledge of building desktop websites. So you start off with some pretty basic HTML:
<!doctype html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Ok! You can’t get much simpler than that. You check it out and it looks good on all the desktop browsers, since there’s really no opportunity yet for any cross-browser inconsistencies. And then you check it out on your mobile device:
Hello World on the iPhone
Doh! Where’d we go wrong? The text is obviously way too small to read without zooming in.
This is the first lesson in making mobile websites: width is your enemy. This is the first of many countless problems with device width you will encounter. Fair warning.
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page.
Viewport
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.
Now we tweak our Hello World just a bit…
<!doctype html>
<html>
<head>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
And we get this…
Hello World with the Viewport tag
Much better! By setting the viewport width equal to “device-width”, we’re essentially telling it that the device width is 320px, not the default value of 980px that it guessed. If we set width=320 it would achieve the same result on the iPhone and a few other smartphones, but not all phones have this exact width, so it’s best to simply set device-width and let the mobile browser figure it out.
This viewport metatag is supported on many smartphones, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile.
At the end of the day here’s what the standard viewport looks like, as grabbed from m.yahoo.com:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
EDIT: It’s been discussed a bit, and it seems that preventing the user from scaling the page (pinch zooming) isn’t necessarily desirable. So here’s a version of the tag that allows the user to pinch zoom:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
More fun with the viewport tag
In addition to solving our biggest concern with the width of the content, the viewport tag has more options to play with:
| Property | Description |
| width | Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari). |
| height | Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property. |
| initial-scale | (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out |
| minimum-scale | (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari. |
| maximum-scale | (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari. |
| user-scalable | (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari. |
Feature phones: when viewport isn’t available…
Unfortunately the viewport tag is relatively new and as such isn’t universally supported, especially if you’re working on older feature phones. But there are some older methods at your disposal for identifying your website as optimized for mobile:
<meta name="HandheldFriendly" content="true"/>
This tag was originally used to identify mobile content in AvantGo browsers, but has now been made the general standard for identifying mobile websites. However, it’s unknown what range of browsers support this meta tag.
Another tag at your disposal is a Windows-proprietary meta tag that also took root and eventually became used as another means of identifying mobile content. The drawback with this tag is that a specific width must be given, which doesn’t make it as flexible as the viewport tag (see above). Again, it’s unknown what the support for this tag is:
<meta name="MobileOptimized" content="320"/>
Lastly, your website will be identified as a mobile optimized site if your doctype is either XHTML-MP or WML. However, this is becoming less and less the case these days, as browsers begin to support good old HTML4.01 and HTML5+.
(info for this section comes from Beginning Smartphone Web Development)
Custom Android properties
The official Android documentation lists a special property they’ve added to the meta tag: target-densitydpi. This property essentially allows developers to specify which screen resolution the page has been developed for, or more specifically how to handle the scaling of media such as images.
Here’s an example of the tag in action:
<meta name="viewport" content="target-densitydpi=device-dpi" />
References
Safari HTML Reference: Supported Meta Tags
Mobile META Tags
More from the Mobile Web series:
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
Thx but in blackberry it seems not scaling it is very large but for iphone it is ok, n how it will identify which css have to call for blackberry / iphone?
@Shyam Good point, I should mention that the viewport metatag mostly works on the latest smartphones and browsers such as Opera Mobile and IE Mobile. Unfortunately there’s no compatibility table that exists, but apparently BlackBerry doesn’t support the metatag, so you’ll have to use older methods of identifying your website as mobile-compatible.
I’ve added a new section at the end of this article for achieving the same result for older phones, so hopefully one of those methods works for you!
[...] The viewport metatag (Mobile web part 1) [...]
[...] The viewport metatag (Mobile web part 1) [...]
Hi,
Is that necessary to place Title Meta tag and description meta tags?
[...] The viewport metatag (Mobile web part 1) [...]
David, what’s the thinking behind disabling user scaling & setting the maximum-scale=1.0?
I’ve come across several sites recently on my android phone with either or both of these settings and it’s been super-frustrating when I actually wanted to zoom because the text was too small or an image was too large to fit on my screen (ahem… instagram).
Why disable that native behaviour?
Is this required if you don’t use a container width (in pixels)?
I’ve been using this hybrid liquid/elastic layout technique for a while: http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/ My websites are perfect on Android. No complains from iPhone users either?
Does this simple apply to HTML5 deployments?
Thanks,
Apologies for the grammer. I expected an edit/preview then
Edit if you like.
[...] The viewport metatag (Mobile web part 1) [...]
Have you a solution to avoid IE Mobile scaling images ? Thanks in advance !
[...] mobile meta tags tot tell the browser to do cool things. The viewpoint meta tag by David B [...]
[...] Úvod do vývoje mobilních webových stránek 0 David B. Calhoun: This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web. It assumes at least a basic knowledge of creating desktop websites. [...]
Is there any reason why you can’t use all of the above (meta tag’s that is)?
Sorry,. I mean to ask: are the meta tag’s exclusively for the browsers or does every browser react in his way to the different metatag`s. For instance if [name="MobileOptimized"] is used can you also use [name="viewport" content="width=device-width"] at the same time?
http://msdn.microsoft.com/en-us/library/dd938878.aspx
According to the documentation for IE mobile 6, setting the IE meta tag’s content attribute to 0 automagically matches your content to screen width. We’re not at testing yet on my current mobile project but I’ll holler if this doesn’t work as expected.
They also claim support for the viewport meta tag so you might only need the IE specific one for versions of mobile IE older than 6.
The greatest challenge in mobile development for me so far is installing and learning to use all these damned emulators + SDKs and god-knows-what-else they’re typically bundled with.
[...] The viewport metatag (Mobile web part 1) [...]
@Erik – you can use http://www.deviceanywhere.com/mobile-application-testing-overview.html , works very well. I know what you mean about the pain of emulators. It’s a mobile world, finally
Thanks a lot for the information.
I’ve been struggling to get some mobile versions of a few website projects to work smoothly until now.
I think Blackberry is moving to webkit so it will soon be compatible too.
You’re a life saver ! thanx a lot !
[...] hilfreicher Artikel zum Viewport meta-tag von David B. Calhoun [...]
Thank you for this post- very useful!
[...] http://davidbcalhoun.com/2010/viewport-metatag [...]
Good day very cool blog!! Man .. Excellent .. Wonderful .. I will bookmark your site and take the feeds additionally?I’m glad to seek out so many helpful information here within the post, we need develop more techniques in this regard, thank you for sharing. . . . . .
Thank you!! I was getting very frustrated not being able to find something like this elsewhere online. Your solution worked perfectly.
Unquestionably believe that that you stated. Your favorite reason appeared to be on the net the easiest factor to take into accout of. I say to you, I definitely get annoyed whilst folks think about concerns that they just do not understand about. You managed to hit the nail upon the top as well as outlined out the entire thing with no need side effect , other folks could take a signal. Will probably be back to get more. Thank you
[...] Part 1: The viewport metatag [...]
[...] [...]
[...] http://davidbcalhoun.com/2010/viewport-metatag [...]