HTML and CSS Reference
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
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]