Configuring Displays for Different Mobile Devices

Question

Does anyone know a way to have specific CSS style sheets based on the type of Mobile Device? I have been researching it a few days now and haven't found anything except this snippet of code for iPhones.

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

This works great for iPhones, but on all other mobile devices (android, blackberry, Nokia), it's still displaying the same as my site. I tried:

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

but that didn't seem to have any effect on the other mobile devices. So I'm not sure how to reach the blackberry's/androids/nokia's without effect the code of my actual site.

I'm building my site using the PHP framework CodeIgniter and I looked into this code which is suppose to be able to tell if it is being looked at through a mobile device or browser.

if ($this->agent->is_browser())
{
    $agent = $this->agent->browser().' '.$this->agent->version();
}
elseif ($this->agent->is_mobile())
{
    $agent = $this->agent->mobile();
}
else
{
    $agent = 'Unidentified User Agent';
}

The only problem is that the newer phones we are building on render the site as a browser and not as a mobile (I think, I've only tested the iphone because it's all I have at the moment). So does anyone have any work arounds for the other phone platforms?

Answer 1

Interfacing with WFURL is supposed to be the usual practice for finding out the screen size and selecting the correct style sheet.

Answer 2

A List Apart have a great article on their Web site all about mobile stylesheets. I hope it helps.