title: Media-Query for the iPad
body: <p>In a website, I use a media query for small devices, effective for screen resolutions &lt;=980px.</p>
  
  <p>Problems is: on the iPad, in horizontal view (1024px), the css file is applied.
  Why is that?</p>
  
  <p>On the desktop (Firefox), I don't have this problem. I tried changing to max-device-width, no difference.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;link rel="stylesheet" href="medium.css" media="(max-width:1150px)"&gt;
  &lt;link rel="stylesheet" href="mobile.css" media="(max-width:980px)"&gt;
  </code></pre>
  
  <p><strong>Thanks for the answers so far.</strong>
  To be clear: I am not looking for a way to target the iPad. I am looking for the reason behind the iPad's behaviour. It's screen has a width of 1024px, but it applies a stylesheet it should not. Why?</p>
  
  <p><strong>Edit</strong>:
  I found the problem/solution. See below.</p>