Configuring Displays for Different Mobile Devices
- by Mike
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?
