Role of Viewport Meta Tag

With the explosive growth of mobile devices (tablets and smartphones), website have a new obstacle to overcome. The screen size. Apple, realizing this problem, created the viewport meta tag. It has since been widely used by others. What is exactly its role ?

First of all, unless you are using responsive design, the viewport meta tag is not necessary. Think of it like a double edged sword. It can help size your design and yet it can also ruin your design. So, if you are using it with non-responsive design, use it wisely.

A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!

Web Designer Wall

I suggest you read up the full post on web designer wall “Viewport Meta Tag For Non-Responsive Design” if you are going to use the viewport meta tag for non-responsive design.

Next, a little bit of history on what is the viewport meta tag:

On desktop operating systems, browser viewports are a fixed number of pixels wide, and web page content is rendered into them as is.

Starting with Safari on iOS (or whatever we were supposed to be calling it back then), mobile browser viewports have been “virtual”. Although the viewport may only take up e.g. 320 pixels-worth of space in the interface, the browser creates a “virtual” viewport that’s larger (980 pixels wide by default on iOS, I think) and renders content in there, then zooms that virtual viewport out until it fits into the actual physical space available.

The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you’re not actually changing your site’s design for mobile, and it renders better with a larger or smaller virtual viewport. (I believe 980 pixels was chosen because it did a good job of rendering lots of high-profile sites in 2007; for any given site, a different value might be better.)

Paul D. Waite – found on stackoverflow

Different mobile browsers have different default viewports, most mobile browsers use a default of 980px width viewport which means it will render the webpage in a viewport 980px and will zoom out to fit all of the webpage on.

The smaller device screen you view this website on the more zoomed out you will be. If you compare the same webpage on a iPhone and an iPad the iPhone page will zoomed out more than viewing the page on the iPad.

Changing the values in the viewport will allow you to customize how mobile devices render your website.

Paulund

So, basicaly, the viewport meta tag is a notification to mobile devices that the webpage is viewed on mobile devices, not a desktop. Only then, the mobile browser start looking in the CSS files for mobile specific information.

Now, go and use the viewport meta tag wisely.