Mar 07, 2021, 10:24 AM


Choose a design and let our professionals help you build a successful website   - ITAcumens

Small Screen CSS

Started by sukishan, Aug 23, 2009, 12:53 AM

previous topic - next topic
Go Down


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]>-->
   media="only screen and (max-device-width: 480px)" 

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.
A good beginning makes a good ending


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

Go Up

Quick Reply

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Please leave this box empty:

Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

shortcuts: alt+s submit/post or alt+p preview
IT Acumens Web Designing Chennai | GinGly :: Build your Personal Website | CineBuzz :: Cinema News | My Kids Diary :: Gift your Kids Memories :: Book Website @ 349 Rs monthly
Copyright 2005 - 2021 :: IT Acumens :: All Rights Reserved. :: XML Sitemap
ITAcumens Discussion Forum with 2 lakhs post running for 15 years - Powered by IT Acumens Pro Dedicated Server

My Kids Diary