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 (
rule ) . However, you can scale the viewport using HTML.
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-
plication Best Practices at .
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.
Search WWH ::

Custom Search