HTML and CSS Reference
In-Depth Information
If you use media queries based on width, the iPhone, iPod touch, and iPad simply scale up the display when
switching from portrait to landscape. To supply different styles to iOS devices depending on orientation, you can
create media queries for the iPhone and iPod touch like this:
only screen and (device-width:320px) and (device-height:480px) and (orientation: portrait) {
/* Portrait styles */
}
only screen and (device-width:320px) and (device-height:480px) and (orientation: landscape) {
/* Landscape styles */
}
Similarly, the following media queries apply to the iPad:
only screen and (device-width:768px) and (device-height:1024px) and (orientation:portrait) {
/* Portrait styles */
}
only screen and (device-width:768px) and (device-height:1024px) and (orientation:landscape) {
/* Landscape styles */
}
In each case, the device width and height remain the same. Only the orientation changes.
■
These dimensions apply to models of the iPhone, iPod touch, and iPad current at the time of this writing.
newer models might be a different size.
Note
To demonstrate the effect of these media queries, the styles in mq.html in the ch17 folder specify a different
background color for portrait and landscape orientation. The media queries also use the
display
property to
hide and show
<div>
elements containing text identifying the target device and orientation. Because mobile
devices come in such a wide range of sizes, only the Apple devices are identified by name.
Figures
17-4
and
17-5
show the results in an iPod touch and an HTC Desire phone running Android 2.2. Both
operating systems respond to the change in orientation. What's striking about iOS is that the text is scaled up in
landscape orientation, as shown in the screen shot on the right of Figure
17-4
. This happens even if the font size
is specified in the landscape styles. This is because the whole page is scaled up, not just the text. Although the
screen shots show only an iPod touch, the iPad behaves the same way.
