title: Changing style sheets depending on useragent
body: <pre><code>&lt;script language="Javascript"&gt;
  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) &gt; -1)
     {document.write('&lt;link rel="stylesheet" type="text/css"       href="ui/mobile/css/site.css"&gt;');
  }   
  </code></pre>
  
  <p>etc...</p>
  
  <p>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. </p>
  
  <p>Any ideas why the css file doesn't change on my iPhone using the above code?</p>
  
  <p>Better yet, any ideas on another way to change style sheets depending on the users platform/screen resolution?</p>