Question

What’s a good way to add mobile-specific CSS to an existing web page?

The requirements are:

• Non-mobile browser view should stay as-is
• Mobile browsers should get a different CSS (that removes certain elements and simplifies the page)
• Mobile browsers of interest are: iPhone and Android. Win7 and WebOS would be nice to haves
• The smaller the number of changes the better

I’m looking at HTML5Mobile boilerplate and various other solutions for the long term, but for the short term I’m looking for a low effort CSS based solution.

I’m hoping for a client-side only solution (as opposed to serving a different page).

Recommendations? Is there a library / article / code snippet that’ll help me out?

Answer 1

The best way to handle this is CSS media queries, which let you serve different stylesheets to different browser resolutions and capabilities. One of the major benefits is that you don’t have to do browser sniffing or any server-side code, which is a nightmare to maintain when dozens of new devices come on the market each month.

Whereas browser sniffing would require you to add specific detection code to your script for each type or grouping of device, media queries handle even devices you’ve never heard of.

As a contrived example, this would make your page have hot pink text on mobile browsers and small screens:

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
    body {
        color: hotpink;
    }
}

Lots of good examples of media queries in use:
http://responsivewebdesigns.tumblr.com/