Configuring Displays for Different Mobile Devices

Posted by Mike on Stack Overflow See other posts from Stack Overflow or by Mike
Published on 2010-04-07T04:34:05Z Indexed on 2010/04/09 1:23 UTC
Read the original article Hit count: 313

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about mobile-phones

Related posts about codeigniter