Targeting Styles with Media Queries - Beginning CSS3 - page 388

If the device is in landscape orientation when the page first loads, the font is displayed at the correct size.
However, if it's in portrait orientation and you switch to landscape, not only is the font scaled up, but the <div > is
no longer centered, as shown in Figure 17-6 .
Figure 17-6. The whole page is scaled up when switching to landscape, affecting the layout
Because the viewport <meta > tag sets only the initial scale, iOS devices still zoom in when the horizontal
viewing area increases. However, double-tapping the screen resets the scaling factor, and the text is displayed at
the correct size and centered, as shown in Figure 17-7 .
Figure 17-7. The page is displayed correctly when the scaling factor is reset
Switching from landscape to portrait doesn't present a problem because iOS devices automatically zoom
out to the correct size. To prevent iOS devices from rescaling when switching to landscape, you can add
user-scalable= no to the content attribute of the viewport <meta > tag, but this is highly inadvisable because
it creates accessibility problems.
Dealing with Images
CSS provides sophisticated control over background images. This means that you can use media queries to
serve different background images depending on the size of the screen. But media queries have limited control
over images embedded in the HTML markup with the <img> tag. Consequently, one of your main priorities in
responsive web design should be to ensure that all images of a purely decorative nature are background images
controlled by CSS.