Using <meta name="viewport"/> to Control Zoom in Mobile Browsers

The <meta name="viewport"/> meta tag can be used to control how HTML content will appear in mobile browsers. It contains a comma-separated list of properties in the form name=value as in:

name=value, name=value, ...

The "value"s are not enclosed in quotation marks.

<meta name="viewport"/> Properties

width

width=device-width or width=nnn where nnn is the number of pixels between 200 and 10000 such as in width=980 (default)

height

height=device-height or height=nnn where nnn is the number of pixels between 223 and 10000

minimum-scale

minimum-scale=f.ff where f.ff is a floating point number between 0.0 and 10.0 such as in minimum-scale=0.25 (default)

maximum-scale

maximum-scale=f.ff where f.ff is a floating point number between 0.0 and 10.0 such as in maximum-scale=1.6 (defaut)

initial-scale

initial-scale=f.ff where f.ff is a floating point number between minimum-scale and maximum-scale

user-scalable

user-scalable=yes (default) to allow the user to zoom in or zoom out on the web page or user-scalable=no to prevent the user from zooming in or zooming out

Note that when a size is specified in pixels, it is not necessarily the number of actual pixels on the device, which can vary from one device to another. It is the number reference pixels, which is defined in CSS as the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. This allows a web site to be displayed the same on devices with different screen sizes and pixel density.

Example of <meta name="viewport"/>

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>

Caveats

The default for height is calculated based on the width and the aspect ration of the device. It is probably best to omit the height and let it default, since a hard-coded height would only be appropriate for either portrait orientation or landscape orientation, but never both.

When an iOS device changes orientation, the width may not be updated immediately. Once the device has been changed to landscape orientation, the user may have to reload the page in order to zoom in or zoom out. When going from landscape orientation to portrait orientation, the user may have to zoom all the way in to the maximum scale before being able to zoom out.