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.
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 ( ) , 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
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.
Sets the viewport height in the same way as width .
Sets the scaling factor as a multiplier or percentage.
The default value is zoom , which permits scaling. If set to fixed , the user is
not allowed to scale the page.
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.
The default is auto , which uses CSS pixels. If set to device , pixel lengths
are mapped to the device's physical pixels.
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;
Search WWH ::

Custom Search