HTML and CSS Reference
In-Depth Information
FIGURE 8.12
Viewport helps
you to better display content
on a mobile device.
The viewport meta tag is not just limited to forcing browsers to tell the truth
about the site's width or height. You can also do the following:
Set a specific width or height to render at.
This is done using a number
for the
width
or
height
value. For example,
<meta name=”viewport” content=”width=320”>
Set an initial zoom factor for your content.
This is done using
initial-
scale
and a zoom factor:
<meta name=”viewport” content=”initial-scale=1.5”>
Such values work just like CSS scale transforms:
1.5
means “zoom in by
50%,”
0.75
means “zoom out to 75% of initial size,” and so on.
Set the target pixel density.
As you'll see later in the “High-fidelity Devices”
section, devices with high resolutions will often have multiple physical
