HTML and CSS Reference
In-Depth Information
To specify more than one property in the viewport
<meta>
tag, use a comma-separated list of name/value
pairs in the
content
attribute. The following example sets the viewport width to the width of the device, and
prevents the display from being scaled down from its normal size:
<meta name="viewport" content="width=device-width, minimum-scale=1">
■
Setting
user-scalable
to
no
is generally considered bad practice because it makes the site
inaccessible to people with visual difficulties.
Caution
Setting the Viewport Size in CSS
Although the viewport
<meta>
tag controls the size and scaling factors of mobile browsers, it was quickly
recognized that it would be more convenient to set the values in one place for the whole website. This led to the
creation of the CSS Device Adaptation module (
http://dev.w3.org/csswg/css-device-adapt/
)
, which maps
the properties from the viewport
<meta>
tag to a new
@viewport
rule. At the time of this writing, the module is
described as being at the exploratory stage, but it has already been partially implemented by Opera and IE 10.
Because it might change, I won't go into
@viewport
in great detail.
It's proposed that the
@viewport
rule will support the properties listed in Table
17-3
. The Min/Max column
indicates which properties can be prefixed with
min-
or
max-
to indicate minimum and maximum values.
Table 17-3.
Proposed @viewport Properties
Property
Min/Max
Description
width
Yes
Sets the viewport width. Minimum and maximum values can be specified
individually using prefixes. The shorthand property accepts two values
for minimum and maximum respectively. Values can be set using the
constants
device-width
and
device-height
, lengths, or percentages.
height
Sets the viewport height in the same way as
width
.
Yes
zoom
Yes
Sets the scaling factor as a multiplier or percentage.
user-zoom
The default value is
zoom
, which permits scaling. If set to
fixed
, the user is
not allowed to scale the page.
No
orientation
Locks the document in the specified orientation,
portrait
or
landscape
.
The default is
auto
, which allows the orientation to change when the
device is tilted.
No
resolution
The default is
auto
, which uses CSS pixels. If set to
device
, pixel lengths
are mapped to the device's physical pixels.
No
The
@viewport
rule is used like any other style rule, with property/value pairs inside curly braces. For
example, the following rule sets the viewport width to the width of the device, and prevents the display from
being scaled down from its normal size:
@viewport {
width: device-width;
min-zoom: 1;
}
