<script language="Javascript">
var deviceIphone = "iPhone";
var deviceIpod = "iPod";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current device is an iPhone.
function DetectiPhone()
{
   if (uagent.search(deviceIphone) > -1)
   {document.write('<link rel="stylesheet" type="text/css"       href="ui/mobile/css/site.css">');
}   

etc...

Above is the start of my code. I am trying to change the CSS file depending on what platform the user is using. I currently use media="screen ... " but it doesn't work with the amount of platforms I'm trying to use. I need something a lot more detailed/complex that is why I'm turning to useragents.

Any ideas why the css file doesn't change on my iPhone using the above code?

Better yet, any ideas on another way to change style sheets depending on the users platform/screen resolution?