When I am talking about mobile css, I am looking for safari in iphone, blackberry default browser and this new born but the mobile browser for majority to be - opera mini. These days, in spite of the fact that the third generation phones - smart phones have made the majority share of cell phone market in US, unfortunately the mobile web hasn’t come to a universal standard that we can apply like we do to those modern computer browsers.  As a result, when designing a website for mobile, it usually takes more effort to find a solution to browser compatibility and accessibility. And funnily, most smart phones don’t consider themselves as handheld device, thus this “handheld” media for CSS doesn’t work for them:

<link media=”handheld” href=”mobile.css” type=”text/css” rel=”stylesheet” />

First of all, iphone and its default browser Safari.

Yes, iphone made everything easy for everyone, not just consumers but also iphone application developer as well as web designers So this approach is rather simple comparing to all other smart phone devices.

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

In order to include all other devices which consider themselves as handheld, we tweak this line to be more general:

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

To be even safer, there are times, the device width is 320 pixel or less. So here we are:

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

Everything works perfectly well with these two lines, except when you come to W3C CSS validator. Yes, W3C doesn’t recognize the mobile style lines, and it doesn’t let them pass through validation. And there is really nothing you can do about it. for more info, you can see some discussion here: http://csscreator.com/node/28171

Blackberry and its default browser.

Blackberry doesn’t pickup any mobile style sheet no matter what media you set to it, not handheld, not width 480px or 320px. There is only one way to give blackberry a mobile looking page - using javascript and direct the page to a blackberry. Below is the script that works. I also tried to apply some mobile style sheet without directing the page to another, but unfortunately didn’t work. more details hereinafter:

<script type=”text/javascript”>
var deviceBB = “blackberry”;

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
var cssFile = “mobile.css”;
//**************************
// Detects if the current browser is a BlackBerry of some sort.

if (uagent.search(deviceBB) > -1) {
//document.getElementById(’blackb’).href = ‘mobile.css’; // this doesn’t work
window.location = ‘home_bb.html’;

//document.write(’<link href=”‘+cssFile+’” type=”text/css” rel=”stylesheet”>); //this doesn’t work either

}
</script>

Opera Mini

It’s a cool mobile browser, which works well with most smart phones - blackberry, iphone, treo palm, etc. To display your mobile CSS on this browser, all you need is still the two lines:
<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

There is this Opera Mini simulator http://www.opera.com/mini/demo/, which makes it possible to test your mobile styles without a mobile phone, however, it only gives you FALSE result. So don’t use it for testing. Install it to your mobile phone and do the real test from there!

Issues you see in real mobile phones but not in simulator:
Opera Mini doesn’t pick up the font size setting in css. Here is the sentence I got from wikipedia:  Opera Mini supports only one font, which can be set to “Small”, “Medium”, “Large”, or “Extra large” size.

http://en.wikipedia.org/wiki/Opera_Mini

The default setting of font size in mobile phone is “medium”. Be aware of this issue when you design the mobile styles, if you are targeting Opera Mini as your mobile browser - use one font size - medium for all text and let it fit in the page.