title: what is the most accurate way to query target mobile device resolutions with CSS @media?
body: <p>If I use <code>max-device-width</code> does that include landscape mode?</p>
  
  <p>Say I use it to detect iPhone 4, should I use <code>max-device-width: 640px</code> or <code>960px</code>? I need to get 3 resolutions: <code>480x320</code>, <code>960x640</code> and <code>854x480</code>. What would be the best way to query for them using <code>@media</code></p>
  
  <p>My take was:</p>
  
  <pre><code>@media screen and (max-device-width: 480px) {}
  @media screen and (min-device-width: 481px) and (max-device-width: 854px) {}
  @media screen and (min-device-width: 855px) and (max-device-width: 960px) {}
  </code></pre>