Sk-etchbook

Until recently I belonged firmly to the camp of believers disillusioned that mobile phones could simply be targeted like so:

<link rel="stylesheet" type="text/css" media="handheld" href="styles.css">

Unfortunately this may have been true at one point, prior to the advent of smart phones, specifically iPhones. It seems as though the death of the handheld style sheet was forecast even before these little beauties hit the shelves. As far back as 2007 the matter is discussed here on Green Beast and also, giving more weight to CSS3 and Opera Mini here on Russel Beattie and Unintentionally Blank.

The issue has arisen due to the fact that the new smart phones aim to give users the full browsing experience. So no need for limiting the amount of images or layouts used, no need for a handheld style sheet.

Or is there?

Just because you can doesn't mean you should. The user may still have limited bandwidth or not gain anything from seeing scaled down versions of your pretty images. They may even have the browser set to mobile browsing.

So whats' the answer?

As usual, no sooner then one source is pronouncing the death another is declaring the return. There is a very good article here on A List Apart covering this very subject.

Hence the solution is yet again down to common sense. What is the site in question like, is it graphically rich, layout or Flash dependent. If so then it may be beneficial to offer a handheld style sheet for non-smart phones and devices or smart phones browsing in mobile-web mode.

However, problem not solved. Mobile browsers still aren't as fast at rendering as desktop versions, the user could be using 3G or using low bandwidth Wi-Fi. You may just think that zooming in on sections of your page destroys the aesthetics anyway so there is no point on serving up full screen versions to tiny little screens.

If this is the case then handheld style sheets are useless. iPhones and other smart phones ignore them.

Therefore, to target these devices you need to use CSS3 media queries.

The solution given on Code Cookbook is:

<!--[if !IE]>
<link media="only screen and (max-device-width: 480px)"
    href="iPhone.css" type="text/css" rel="stylesheet" />
<![endif]-->

However there are a few comments saying this technique does not work so you may want to try Googling it for yourself. Here is another article to start you off.