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
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 .
Integer or constant
Sets the viewport height. On iOS, the minimum is
223 . Otherwise, accepts the same values as width .
Sets the initial scaling factor. Values can be
expressed as numbers with a decimal fraction in the
range 0.1 - 10 .
Sets the minimum scaling factor in the range 0.1 - 10 .
Sets the maximum scaling factor in the range 0.1 - 10 .
yes or no
Determines whether the display can be zoomed in
and out. The default is yes .
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.
Search WWH ::

Custom Search