⚠️ Warning: this is an old article and may include information that’s out of date. ⚠️

The skinny

Use this:

1

<meta name="viewport" content="width=device-width, initial-scale=1" />

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>

{:lang=“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:

{% imgcap center http://davidbcalhoun.com/wp-content/uploads/2010/05/hello-world-iphone.png 320 480 Hello World on the iPhone, WITHOUT the viewport metatag %}

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…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!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…

{% imgcap center http://davidbcalhoun.com/wp-content/uploads/2010/05/hello-world-viewport-iphone.png 320 480 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:

1
2
3
4

<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:

1

<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:

<td>
  Description
</td>

<td>
  Width of the viewport in pixels (or device-width). If width isn't set, it defaults to a desktop size (980px on mobile Safari).
</td>

<td>
  Height of the viewport in pixels (or device-height). Generally you don't need to worry about setting this property.
</td>

<td>
  (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
</td>

<td>
  (0 to 10.0) The minimum multiplier the user can "zoom out" to. Defaults to 0.25 on mobile Safari.
</td>

<td>
  (0 to 10.0) The minimum multiplier the user can "zoom in" to. Defaults to 1.6 on mobile Safari.
</td>

<td>
  (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to "yes" on mobile Safari.
</td>
Property
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable

Feature phones: when viewport isn’t available…

Note: this info is now very outdated and is preserved here just for historical reference. In general, you can ignore this stuff these days.

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:

1

<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:

1

<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:

1

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

References

Safari HTML Reference: Supported Meta Tags
Mobile META Tags

More from the Mobile Web series: