Getting Started with the viewport meta Tag

Posted In

I spent sometime recently digging into the process of responsive web design and I quickly discovered there are many factors to consider in order  to achieve a successful result. After some fruitless experimentation I discovered the importance of the viewport meta tag. Below is a screenshot from a recently designed website viewed in mobile Safari on an iPhone 3G, with the meta viewport tag omitted:

without-meta-viewport

The Issue at Hand

Without instruction, the browser will render the page zoomed out, so the viewport of the page (940px) can be displayed at the width of the device (320px), which is obviously undesirable when going responsive.

The Solution

Add in the meta viewport tag:


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

With this tag in place, the page is now scaled 1:1 (the viewport is matched up to the width of the device) and no longer appears zoomed out when viewed on mobile Safari (obviously this needs some work ;), but you get the idea):

with-meta-viewport

Sprinkle in some media queries and utilize a fluid grid and you will be well on your way to a responsive solution.

More on the content Attribute

I encourage you to look a little deeper into the meta viewport tag, as the content attribute appears to have several options. For instance, you can control things like the initial-scale, minimum-scale and maximum-scale of a page. The most common usage seems to be:


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

0 thoughts on “Getting Started with the viewport meta Tag

Leave your thoughts or follow me on Twitter @joshdillon1