A LIST Apart: For People Who Make Websites

No. 275

Discuss: Return of the Mobile Stylesheet

Pages

« First  <  2 3 4

31 How can we optimize mobile stylesheet

Hi,

mobile style sheet working but if it is heavy then how we can optimize CSS for mobile sites.. is there any technique for optimization mobile website… I want to make mobile website

posted at 06:57 am on June 6, 2009 by 22websitedesign

32 Simply genius

Your article was really good, thanks would implement for http://www.awoof.org, I viewed this site using BOLT and it showed the entire page (using the screen css), hopefully I should make the site shed some ‘mobile weight’ after implementing your css ideas.

Cheers

posted at 06:25 am on October 12, 2009 by bennee

33

It seems that the “only” does not work.

Instead of

<link rel=“stylesheet” href=“handheld.css”
media=“only screen and (max-device width:480px)”/>

it needs to be

<link rel=“stylesheet” href=“handheld.css”
media=“screen and (max-device width:480px)”/>

to apply the stylesheet correctly on my iPod.

posted at 07:27 am on January 25, 2010 by nickw108

34 opera mini and only

Opera Mini seems to have trouble with the “only” keyword in the media declaration. If you look at David Story’s example here: http://my.opera.com/dstorey/blog/media-queries-and-handheld-stylesheets

He’s using media=“handheld and (max-device-width: 480px), screen and (max-device-width: 480px)”

Technically he’s using the @media{} inside the stylesheet, but I found it was actually the “only” keyword that was stopping opera mini from reading my stylesheets and you can use <link> if you’re more comfortable with that method.

posted at 04:59 pm on April 15, 2010 by Tim Sookram

35 iPhone 4?

I wonder how this works for the iPhone 4, which has a 960 × 640 resolution. You could use the only-rule with width:960px, but that means that all screens with a lower width will use this stylesheet. What is the best way to handle this?

posted at 08:18 am on December 19, 2011 by ralat

36 Transform your website into Mobile version with CS

To convert an existing website into its mobile version is a different task than the PC version designing. Different resolutions, different OS, different browsers will make it tough for a designer/developer.  Different style sheets for PC and Hand Held devices are a nice idea.  We need to take extra effort to make the website visually appealing and user friendly in hand held devices. Mainly we need to focus on the following things.
1. Fix the website to the smaller resolution
2. User friendly Structure
3. Easy Navigation

posted at 12:28 pm on February 3, 2012 by webtimal

Pages

« First  <  2 3 4

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)