Small Screen CSS

[sukishan]

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.

[merchantprocessing]

Thanks for this, but if you are searching from a mobile would the browser be IE?

[pradeep prem]

yes in phone and desktop screen should be differently change small
from this style sheet program the .css should be used in small screen
the screen.css can be used in the handling devices