Using the Viewport Meta Tag for Fun and Profit

Yesterday I posted what is basically my intro to this series on mobile web development. For a bit we are going to talk about some things that affect mobile web development whether you are focusing on just making some content work on mobile or if you are building a mobile web app. The first thing to talk about is the viewport meta tag. To show what this does, we’re going to iterate through making a page mobile-friendly. First, the page without modifications:


<!DOCTYPE html>
<html>
<head>
  <title>Viewport Test Page</title>
  <style type="text/css">
    body
    {
      background-color: #CCC;
      margin: 0;
      padding: 0;
    }
    #content
    {
      background-color: #FFF;
      padding: 10px;
      width: 940px;
    }
  </style>
</head>
<body>
  <div id="content">
    <h1>Page Header</h1>
		
    <p>Lorizzle ipsum dolor i'm in the shizzle amizzle...</p>

    <p>Sizzle vitae bizzle in arcu go to hizzle consequat...</p>
  </div>
</body>
</html>

As far as Html goes, simple stuff. You have a header and two paragraphs (clipped here because actually showing all the gangster lorum ipsum does you no good) wrapped in a div. The width of the content is constrained to 960px (940px width plus 20px padding), but that’s it. Here is how it looks on my iPhone.

Screenshot of the test page with no viewport meta tag.

Okay, so that’s mostly unreadable. Prepare for much pinching and zooming! Most links I click on in Twitter end up on pages that look like this, which is not awesome. The problem is that the content of the page has been scaled to fit within the viewport of the device.

Wut you ask? Well, the viewport on a device like the iPhone is the part you can view. If viewing the device in a vertical orientation, you have 320px of width and 480px of height (double that for retina screens though all that I am about to show you works equally well on both resolutions). Most pages I visit via the Twitters look like this because I have a viewport of 320px but the size of the site is set to something much larger, like 960px. Fortunately, using the viewport meta tag can help things. Observe the following tag:


<meta name="viewport" content="width=device-width">

If I add that to the head tag of my page, upload it and view it on my iPhone, I get this:

Screenshot of the test page 
    with a viewport meta tag.

It is better, but not quite ready yet. It is at this point more readable but you still have to some scrolling back and forth. Not cool. So let’s change one thing in our Css. Fixed-width dimensions on web pages make things much more difficult for making something work well for mobile, so let’s change the width to max-width. We get the following:

Screenshot of the test page with width constrained and a viewport meta tag.

Well golly, that’s much more readable. Surely in more primitive cultures I would be called a magician for such wonderous feats.

There is more you can do with this meta tag. Let’s try setting the initial scale of the page. If we were to set this to 1, we would see what we saw before. Boring! Let’s take this up to 11!


<meta name="viewport" content="width=device-width, initial-scale=11">
Screenshot of the sample page, scaled to 11.

Bam! In yo face! I have no idea why you would want to do that but at least you now know that you can. You can also specify a value for maximum-scale. Another option is to remove scaling by putting user-scalable=no. And as you might guess, this is often a bad idea because you run the risk of hurting usability.

So there is the viewport meta tag. But there is still a problem. What if things don’t look quite right at this smaller size? It would be nice if there was an easy way of styling the page differently depending on the page width. Fortunately there is a way to do this using Css media queries, which we will discuss next time.