Mobile web design viewport size vs screen resolution - viewport META tag

In a previous post I mentioned the various screen resolutions of popular mobile phones. Today I'll mention how the screen size and viewport may be different!

So, what is a viewport?
The viewport for web design is defined as the rectangular area (measured in pixels) that is viewable on the screen and determines how the content is laid out and where text wraps or windows need to be scrolled to see the full webpage.

Isn't the viewport the same as the screen resolution?
For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however for mobile devices this may not be true!!

Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980px. In this case a web page designed at 980px or less will fit completely on the screen.

The difficulty comes with different mobile devices and mobile browsers as they have different viewport sizes. Here is a short list of some popular mobile browser viewport sizes:

• Opera Mobile browser viewport 850px
• iPhone safari browser viewport 980px
• iPad (landscape & portrait mode) viewport 980px
• Android browser viewport 800px
• IE mobile browser viewport 320px

This graphic shows the implication of various viewports on three different devices for the Web Devil blog (click to enlarge):

How to change the default viewport?
So now we know that the new breed of mobile devices and browsers each have their own viewport, how do we change it?  The answer is by using the viewport meta tag.
The viewport meta tag sits in the document head and is valid for these new devices.
It is possible to specify a fixed viewport (like the standard view of this blog):
<meta name="viewport"content="width=1100"/>

However for many webpages it's probably best to avoid hard coding a width.  This is because you don't know what devices are being used to view the web page.  Instead it's possible to define the default viewport width of the device:
<meta name="viewport" content="width=device-width"/>

It is also possible to change the scaling behaviour of the screen and whether the user is allowed to scale the page.  Syntax for the viewport content includes:

• height = [pixel_value | device-height] ,
• width = [pixel_value | device-width ] ,
• initial-scale = float_value ,
• minimum-scale = float_value ,
• maximum-scale = float_value ,
• user-scalable = [yes | no] ,
• target-densitydpi = [dpi_value | device-dpi |high-dpi | medium-dpi | low-dpi]

Many phones have a different pixel density or dpi than the desktop 72dpi, so setting target-densitydpi=device-dpi is a good idea to prevent blurry images due to scaling effects.
The viewport meta tag for the touch sensitive sidebar version of this blog is:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

What about older mobile phones?
As previously mentioned, all of this only works for new mobile devices. The older blackberry doesn't support it - it needs:
<meta name="HandheldFriendly" content="true"/>  

And the older Internet Explorer mobile needs:
<meta name="MobileOptimized" content="width" />

If you place all three meta tags (HandheldFriendly / MobileOptimized / viewport) then the mobile will pick the most current one that it understands.

For more details about targeting to the viewport of a device then the android developers guide has some good information at  developer.android.com/guide/webapps/targeting.html