One of the key steps in creating a responsive web layout is defining how it will look on mobile devices. While media-queries allow us to define alternate CSS for the positioning and scaling of elements, the viewport meta tag defines the width and scale of the “page” itself.

Here’s an example of a tag that will force the browser to resize a website based on the device’s viewport:

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

So, what does this mean?

Most mobile web browsers will scale web pages down so the entire width of a page fits neatly. Which is great, especially for sites that haven’t been optimized for small displays. The caveat is, the browser doesn’t scale pages up in size to fit the screen, even if the width of the page is set to device’s resolution. Enter the meta tag.

By adding the viewport meta tag we can force the browser to use its display resolution (or any specified number) as the base width for a website. A few other parameters can be added as well to further handle user/browser scaling.

Here are a couple articles to add to your Instapaper:

• Using the viewport meta tag to control layout on mobile browsers
• Configuring the Viewport