Support
Browser Wars 2.0 > Media Type Mayhem > The Nitty Gritty
Okay, so you've decided on the browsers to test with, and you are ready to give this whole mobile web thing a try. Great. So let's create a CSS style sheet and be on our way! Unfortunately, as you might have guessed, it's not that easy.
Silly me, I figured that there would be a simple way to target mobile browsers using a media type when referencing an external style sheet. Apparently not. Some mobile browsers read only "handheld" style sheets, some read only "screen" style sheets, and some read both. Good grief. So what can we do about it?
One solution is to use CSS media queries. This is a relatively recent addition to the CSS specification (CSS3) that is supported by Safari, recent versions of Opera Mobile and Mini, and Android (with some tweaking), among others.
Basically, media queries allow you to use additional device properties (beyond the simple media type keywords such as "screen," "handheld," and "print") to target external style sheets for. One of these properties is screen size.
So to target an iPhone, for example, you could use this markup (courtesy of Apple's Dev site):
<link media="only screen and (device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet">
Clearly a little research into average device screen sizes is warranted here, but this seems pretty straightforward so far, right? Now update "device-width" to "max-device-width" to cast a wider net and add in support for browsers that read only the handheld media type:
<link media="handheld, only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
Okay, everything looks great, but what about those devices that read both screen AND handheld style sheets? If you want to have exclusive style sheets for desktop browsers and mobile browsers, this becomes a problem. There is a nifty workaround in Dominique Hazael-Massieux's article Return of the Mobile Stylesheet, but you'll have to decide if you truly need to go that far depending on the browsers you are attempting to support.
And what about the browsers that read only the "screen" media type and also don't support media queries? Well, there is little hope for them at this point, but honestly I really wouldn't worry about it. First of all, you most likely won't have many users that are affected. Secondly, even for those few users, their experience will be no worse than if you were doing nothing to optimize your page for mobile devices. We have to start somewhere, and improving the experience for a majority of our users is better than doing nothing at all.