HTML and CSS Reference
In-Depth Information
When you view a web page on a mobile device, many mobile browsers scale the viewport so the page fits on the
screen without the need for horizontal scroll bars. The reason Cool Shoes & Socks is so small when viewed in Opera
Mobile Emulator—and you'll find the same happens across many devices—is that the page is scaled down to fit.
Because media queries are a new technology, many websites don't use them. Therefore, a mobile browser scaling
down the viewport in this way provides a solution that makes the majority of web pages display reasonably well on a
smaller screen. Text can often be hard to read at this size, but users can get a quick overview of the page and zoom in
to the sections they want to see or read—a better approach than being able to show only a small part of a web page at
a higher zoom level.
Because you're working on the Cool Shoes & Socks page now, though—with the media queries module in a Recom-
mendation status—you get the privilege of choosing how your web page looks on a mobile device. Letting a mobile
browser scale the viewport is a quick fix but not a perfect one, which is where media queries step in.
As yet, there isn't a way to change the scaling of the viewport via CSS, although the feature is on its
way in the CSS Device Adaption module (
dev.w3.org/csswg/css-device-adapt/#the-viewport-
1.
In index.html, below
<meta charset=”utf-8” />
, add the following:
<meta name=”viewport”
content=”width=device-width, initial-scale=1, maximum-scale=1”>
2.
Save index.html.
When you specify the
width
as
device-width
, the viewport is set to the same width as the device. The
initial-scale
is the zoom applied to the page when it first loads,
1
being the equivalent of 100%. When
maximum-scale
is set to
1
, the page can't be zoomed in more than 100%. The CSS Device Adaption module ex-
plains that the
initial-scale
property will actually be called
zoom
; likewise, similar properties such as
minimum-scale
and
maximum-scale
(which determine how far in and out the user is allowed to zoom) will
be translated to
min-zoom
and
max-zoom
.
Because the CSS Device Adaption module is an Editor's draft at the time of writing,
CSS3 Foundations
doesn't cov-
er that module. If you would like more information about
<meta name=”viewport”>
, see the Mobile Web Ap-
So what does this change do to Cool Shoes & Socks? As shown in Figure 16-4, the page now zooms right in.
Everything is bigger but crammed into a smaller place, so whether the page is more readable is arguable. Likewise,
some elements look a little broken and/or could do with being positioned differently. Using media queries, you can
address all these issues and only for the mobile experience—the desktop experience isn't changed.
