title: Using Js to change my style sheet for ipad?
body: <p>I currently have styles applied to my site that take effect when the screen is resized or when it's visited with an iphone, using CSS media queries. <a href="http://iamcreative.me" rel="nofollow">http://iamcreative.me</a></p>
  
  <p><em>The media-query</em></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px) and (orientation:portrait)" href="css/iphone.css" /&gt;
  </code></pre>
  
  <p>The problem I found was that once I created a stylesheet for an ipad's 720px portrait view, this would affect some of the styles that I created for the iphone!  </p>
  
  <p>I think this is because the iphone now has a screen resolution of 940px. </p>
  
  <p>So this is what I came up with and wondered if this is the best way of getting round my problem?</p>
  
  <p><em>I create the function:</em></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function isiPad() {
      return navigator.userAgent.match(/iPad/i); 
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><em>Then in the page I add:</em></p>
  
  <pre><code>if (isiPad()) { 
  document.styleSheets[0].href="ipad.css";
  }
  else
  {
  document.styleSheets[0].href="everything-else.css";
  }
  </code></pre>