Small Screen CSS
The most obvious difference between an iPhone and your PC or Mac is that the iPhone has a much smaller screen. If you already have a page that works in desktop browsers and screen readers, one simple strategy is to have an additional style sheet that's only used by the iPhone. Here's the markup you'd use:
<!--[if !IE]>-->
<link
rel="stylesheet"
href="small-screen.css"
type="text/css"
media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->
This link element uses a media query to target devices with a maximum width of 480 pixels--that is, the available width when the iPhone is in landscape orientation. The IE conditional comments are needed for IE version 5.5 or earlier; these versions lack support for the media query and will load the style sheet intended for the iPhone. Let's try an example.
In Example 1, we can see a page that will display a red box to iPhone viewers, and a blue one to other viewers. A style sheet, common.css, contains styles intended for all browsers, including the declaration for the blue box. Another, small-screen.css, is intended for handheld devices and contains the declarations for the red box. When you load this example in an iPhone, you'll see the red box; on your desktop, you'll see blue.
If you'd prefer to use only one style sheet, you could add the iPhone-only styles to the main style sheet using an @media block, like so:
@media only screen and (max-device-width: 480px) {
#test-block {
background: red;
}
}
We can see an example of an inline stylesheet in use in Example 2. In the stylesheet it uses, onestyleforall.css, you'll see the declaration for a red background in an @media block.
