Using <meta name="viewport"/> to Control Zoom in Mobile Browsers
The <meta name="viewport"/>
tag in HTML
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
orwidth=nnn
where nnn is the number of pixels between 200 and 10000 such as inwidth=980
(default)- height
height=device-height
orheight=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 inminimum-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 inmaximum-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 oruser-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.