HTML and CSS Reference
In-Depth Information
Listing 2-7.
Meta Elements from the Source Code
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-
scale=1.0; user-scalable=no; target-densitydpi=device-dpi;"/>
The first meta tag specifies the character set used within the document. This
should usually be UTF-8, which will cover the majority of language characters.
The second meta tag is specifically used to control the layout or viewport on
mobile web sites. With this meta tag, we can set the width of the page to be the
same, smaller, or bigger than the viewport (visible area of the browser screen)
using the
width
property.
You can also use this tag to control how much a user can zoom into your web
application with the
initial-scale
and
maximum-scale
properties.
The
user-scalable
property is a flag used to enable or disable users from
pinching or tapping to zoom into or out of your mobile web application.
Finally, the
target-densitydpi
property is used to dictate how the web page
should scale based on the pixel density of the user's screen. Setting this
property to
device-dpi
will prevent images from automatically scaling up for
devices with a high pixel density or down for devices with a low pixel density.
This helps to prevent pixilation in images commonly found when images are
scaled by the device. In Chapter 3, you will discover how to use media queries
to prevent images from becoming pixelated on high/medium and low-density
devices. Listing 2-8 shows the full definition for the viewport meta tag.
Listing 2-8.
Full Viewport Meta Tag Definition
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
" />
