Use of meta viewport for mobile devices

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

To understand the purpose of this tag, we have to understand what mobile browsers are doing when they are rendering sites.  Let’s say that a mobile browser is trying to render a site that has a fixed width of 1000 pixels.   And say, the mobile screen is only 320 pixels wide (in portrait orientation).  The mobile browser would draw the site on a 1000 pixel canvas and then apply a zoom so that it fits within 320.  The effect is that the page width fits onto the screen.

This is fine if the site is a fixed-width site.  Albeit, the text will be super tiny and the user will have to pinch to zoom in to read the parts they want to read.

However, if you are designing a responsive site that resizes and adapts to the width of the device, we should then apply the meta viewport tag.

A meta viewport tag such as …

<meta name=”viewport” content=”320″>

tells the mobile browser to draw on a canvas of 320 pixel rather than 1000 pixel.   We choose 320 pixels since our mobile device screen is 320 pixels.

The problem is that the site will not always be viewed on this device of 320 pixels wide.  Perhaps the user rotates the device to landscape mode and it become 480 pixels wide.  The site will be viewed by a whole bunch of other devices (ipad, tablets, laptops, desktops) that are capable of much more than 320 pixels.

So instead of a fixed number like 320, we write …

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

Now the mobile browser will draw on a canvas with a width the same size as the width of the screen.

As that is the case, we can also specify that it performs no zooming by setting an initial-scale of 1.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Like all meta tags, it should be in the head section of the HTML.

It can also be written equivalently as …

<meta name=”viewport” content=”initial-scale=1.0, width=device-width”>