title: Load css file for ipad only
body: <p>Im trying to load a css file for ipad only. I tried this:</p>
  
  <pre><code>&lt;link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css"&gt;
  </code></pre>
  
  <p>It works for iPad but if I lower my resolution to 1024 by 768 on my desktop and view the site in firefox the ipad stylesheet loads as well. So I tried:</p>
  
  <pre><code>&lt;link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css"&gt;
  </code></pre>
  
  <p>But still same issue. How can I make sure this stylesheet ONLY loads if they are viewing the page on a iPad?</p>