Nov 19, 2017, 06:46 AM

News:

IT Acumens Proudly Presents "Gin Gly": Sms Backup / Contacts Backup / Sms Grouping Website Used by Members 85,000 - SMS Backed up 7,25,000 - Contacts Stored  28,850. For 5 Years !!


Small Screen CSS

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

previous topic - next topic
Go Down

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

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

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.
Name:
Email:
Verification:
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 | GinGly :: SMS Backup | Acumen :: Discussion Board | AshokPillar :: Hosting | CineBuzz :: Latest Cinema News | My Kids Diary :: Capture your kids magical moment
Copyright 2005 - 2017 :: IT Acumens :: All Rights Reserved.
ITAcumens Forum with 2 lakhs post running for 10 years - Powered by HostGator Dedicated Server