Targeting Styles with Media Queries - Beginning CSS3 - page 385

It's the equivalent of the following <meta> tag:

<meta name="viewport" content="width=device-width, minimum-scale=1">

Not ■ Because the @viewport rule is still experimental, you need to use browser-specific prefixes. For Opera,
use @-o-viewport . For iE 10, use @-ms-viewport .

Width and Orientation—A Conundrum
Take a look at the screen shots in Figure 17-3 of the website for The Boston Globe . Both were taken on an iPod
touch. The one on the left was taken in portrait orientation, and the one on the right in landscape. Which one
would you say is wider?

Figure 17-3. The Boston Globe's responsive design looks different in portrait and landscape orientation

I think most people would agree that the screen shot on the right is wider. However, iOS disagrees. Even
though the horizontal content area is bigger in the screen shot on the right, Safari on iOS always bases width and
height on the dimensions in portrait orientation.
It wouldn't matter if all mobile devices treated width and height the same way. Unfortunately, iOS is the odd
one out. Other mobile operating systems base the width on the device's orientation.

Cautio ■ Most mobile devices measure width across the horizontal axis in the current orientation. So, width
increases in landscape orientation and decreases when the device is held in portrait orientation. in iOS devices
(iPhone, iPod touch, and iPad), width is always based on the shorter dimension.