16 Chapter 2
and device-width, in physical pixels. To make content readable and “natural
sized” on a small screen, both dimensions need to match. You do this by
adding the viewport meta tag into the head of the document, like this:<meta name="viewport" content="width=device-width">When the viewport meta tag with these values is present in the head of a
page, mobile browsers go into “mobile mode,” in which the viewport is sized
to ideal dimensions for that device. The result is that content is displayed at
a more appropriate size for the device.noTe For a more in-depth explanation of mobile viewports and pixels, see Dutch developer
PPK’s “A Pixel Is Not a Pixel Is Not a Pixel” (http://www.quirksmode.org/blog/
archives/2010/04/a_pixel_is_not.html).The viewport of a browser on a mobile device tends to be as large as the
screen itself, so the two are basically equivalent; and on desktop browsers,
you will most likely want to make your content relative to the width of the
viewport rather than that of the screen. For these reasons, the device-width
media feature becomes less useful than width, and you probably won’t use it
too much in practice.
The viewport meta tag is being standardized in CSS as the @viewport
rule; see “Device Adaptation” on page 252 for a brief walkthrough.Orientation
If you’re less concerned with the actual dimensions of the viewing device
but want to optimize your pages for either horizontal (like a typical desk-
top/laptop web browser) or vertical (like a mobile phone or ebook reader)
viewing, the media feature you need is orientation. Here is its syntax:@media (orientation: value) { rules }value can be one of two keyword options: landscape or portrait. The
landscape value applies when the width of your browser is greater than its
height, and the portrait value applies when the opposite is true. Although
orientation can certainly be applied to desktop browsers, you’ll find it most
useful when dealing with handheld devices that the user can easily rotate,
such as smartphones and tablets.
For example, you can use orientation to display a navigation menu hori-
zontally or vertically, depending on the visitor’s browser orientation. The
code looks like this:ul { overflow: hidden; }
li { float: left; }
@media (orientation: portrait) {
li { float: none; }
}