The Road Ahead - HTML5 Mastery: Semantics, Standards, and Styling - page 336

Note There is a CSS rule, @viewport , that is under development as an alternative
for the meta element viewport rule. For implementation details, see this page on
Opera's website: www.opera.com/docs/specs/presto28/css/view-
portdeviceadaptation/ .

Next, an additional option can be added to prevent the page from zooming unneces-
sarily. Add initial-scale=1.0 to the meta element:
<meta name="viewport" content="width=device-width,

initial-scale=1.0" />
The viewport meta element value is a fairly recent addition; it was added by
Apple for use on the iPhone but has since been incorporated into other contemporary
mobile OSs. However, to accommodate older mobile browsers, it is a good idea to add
two additional meta elements:
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
Both these values herald from the earlier days of the mobile Web, so eventually they
will no longer be necessary to include, but for now it is a good idea to include them.
Now if the page layout is optimized for a 320-pixel-wide viewing area, it will fit right
into the display area of most modern mobile phones, but to actually achieve this width
and allow the site to still be comfortably viewable in a desktop environment, you will
very likely use media queries, which we'll look at next.

Note The HTML5 Boilerplate project mentioned in Chapter 1 has a version tailored
for mobile devices at http://html5boilerplate.com/mobile , which in-
cludes these meta element values.

Media queries

Media queries are a new addition in CSS3 that allows CSS to inspect the physical char-
acteristics of the viewing device and change the CSS rules accordingly. Media queries
grew out of the need to tailor CSS for different media types, such as for print or for
screen. A typical media query might look like this:
@media only screen and (min-width:480px) and (max-

width:767px) {
body { width:560px; }

}