HTML and CSS Reference
In-Depth Information
Setting the Viewport Size in HTML
To allow web designers to control the viewport on the iPhone and iPod touch, Apple introduced a
nonstandard
<meta
>
tag, which proved so useful that it was adopted by other mobile browsers. It's now registered
as a valid extension of the
<meta
>
tag, and forms the basis of the
@viewport
rule being standardized by the W3C.
To get mobile devices to set the viewport width to the width of the device, add the following
<meta
>
tag in
the
<head
>
of each web page:
<meta name="viewport" content="width=device-width">
The viewport
<meta>
tag also allows you to control how the page is scaled. The
content
attribute accepts the
properties listed in Table
17-2
.
Table 17-2.
Viewport Properties
Property
Value
Description
width
Integer or constant
Sets the viewport width. Negative numbers are
not allowed. When specified as an integer, pixel
lengths are used. On iOS, the minimum is
200
. On all
systems, the maximum is
10000
. Accepted constants
are
device-width
and
device-height
.
height
Integer or constant
Sets the viewport height. On iOS, the minimum is
223
. Otherwise, accepts the same values as
width
.
initial-scale
Number
Sets the initial scaling factor. Values can be
expressed as numbers with a decimal fraction in the
range
0.1
-
10
.
minimum-scale
Sets the minimum scaling factor in the range
0.1
-
10
.
Number
maximum-scale
Sets the maximum scaling factor in the range
0.1
-
10
.
Number
user-scalable
yes
or
no
Determines whether the display can be zoomed in
and out. The default is
yes
.
target-densitydpi
Integer or constant
Scales the page up or down depending on the pixel
density of the device. The value should be one of the
following constants representing the target density
for which the page was designed:
device-dpi
,
high-dpi
,
medium-dpi
, or
low-dpi
. Also accepts a
value in the range
70
-
400
representing the number
of dots per inch. Supported only on Android.
