Quick Tip: Don’t Forget the Viewport Meta Tag

Quick Tip: Don’t Forget the Viewport Meta Tag

on Feb 13th 2012 with 41 comments
Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Beginner
  • Estimated completion time: 8 seconds

I remember my maiden voyage into responsive web design; I’d used a classic grid, wrestled with a flexible layout, and tackled media queries for the first time. Stretching and shrinking the browser window resulted in the satisfying sight of my design responding to its surroundings. Then I tested it on a mobile. It didn’t work – I was looking at a shrunken down version of the full-screen design. The solution, as it turned out, was simple..

The Crux

If you read nothing else within this post, take one bit of advice away: if you’re designing flexibly, use the viewport meta tag in your <head>. In its basic form, it will set you up for cross-device layout peace of mind:

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

The Problem

Let’s take a look at an example layout I’ve whipped together using a stripped down version of the Skeleton boilerplate. Take a look; you’ll see it shrink and grow as you alter the size of your browser. Lovely.

Here’s how iOS Safari iPad sees it when viewed in landscape:

More or less as we would expect. This is the layout as it should be with a viewport (the area available for viewing the webpage) of 980px. Now let’s rotate the iPad 90° and see how it looks in portrait :

Right. We’re looking at a zoomed-out version. This is exactly the same as the first example; 980px of content, but this time squished into the iPad’s portrait width of 768px. The type is now much less readable, unless you zoom in.

Why?

As they say, assumption is the mother of all…something but that’s exactly what mobile browsers have to do if you don’t specifically instruct them. When you visit a website via a mobile browser it will assume that you’re viewing a big desktop experience and that you want to see all of it, not just the top left corner. It will therefore set the viewport width at (in the case of iOS Safari) 980px, shoe-horning everything into its little display.

The Viewport Meta Tag

Enter the viewport meta tag, introduced by Apple, then adopted and developed further by many others.

It looks like this:

<meta name="viewport" content="">

Within the content="" you can enter a load of comma delimited values, but we’re going to to focus on the fundamental ones for now.

For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:

<meta name="viewport" content="width=320">

For flexible layouts it’s more practical to base your viewport width on the device in question, so to match your layout width to the device width you’d enter:

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

To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example:

<meta name="viewport" content="initial-scale=1">

..will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied. You could even go further and prevent any zooming by the user:

<meta name="viewport" content="maximum-scale=1">

Note: Before applying the maximum-scale parameter, consider whether you should really be preventing your users from zooming in. Can they read everything as well as possible?

Put it All Together

These values together give us a great default to work with:

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

Let’s see how it affects our example, here in landscape:

..and here in portrait:

As you can see, everything remains at the correct scale, the layout has altered (smaller column widths) and the text is wrapping instead of shrinking.

Conclusion

Responsive web design isn’t just for people who enjoy watching their browsers grow and shrink, it’s about catering for as many different devices, screens and resolutions as possible! Throw the viewport meta tag into your <head> when you’re building flexible layouts and you’re good to go.

Further Reading

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more