Martin Abrahams Team : Web Development
15May2015

Popular Viewport Settings

Martin Abrahams Team : Web Development

The viewport tag is a very important part of responsive web design today and it's arguably equally as important to ensure that your legacy websites are retrofitted with a viewport tag to improve the user experience on mobile devices. Having the correct viewport settings on a fixed (non responsive) site will allow you to fine tune the way your site works on mobile devices with no additional modifications to the website. Here is a quick explanation of the most common viewport properties.

The viewport is a meta tag which contains a comma seperated list of key/value pairs. Here's an example of the current wiliam.com.au viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=0.67, minimum-scale=1, maximum-scale=device-width"/>

Viewport properties

initial-scale

 This sets the initial zoom of the page. This is set to 1 by default (1 being 100%, 0.8 is zoomed out 20% and 1.2 is zoomed in 20%).
maximum-scale

As the name suggests, this is the maximum you want to allow the user to zoom in. Zooming in is definitely an accessibility feature, so you should not get too ambitious with this however there may be times when it's suitable such as an image gallery where you'd like to prevent images from becoming too pixelated by excessive zooming.
minimum-scale

As you'd guess this is the opposite of maxium scale, zooming out on some websites could be seen as pointless and undesirable so it's not uncommon to use a value of 1 or device-width to prevent zooming out.
user-scalable

This allows the user to zoom in or out on the device. This is critical for mobile devices and accessability. This is enabled by default and you would have to have a very good reason to disable this, since it would have a very negative impact on usability.

An example of when you would disable scaling is if you had a full screen map with it's own zoom functionity (such as Google Maps) which intercepts the touch events. Disabling scaling in this instance would prevent conflicts between the page and map events.
width

This sets the width of the viewport. This is most commonly used for non responsive websites to specify the visible content area of the website. By default most browsers default to device-width which as you'd guess is the device's width, this is the value which is most commonly used for responsive websites.