title: Media queries for iPad vs iPad Air
body: <p>There are 2 Good discussions about <code>@media</code> queries on StackOverflow already. One of them is here: <a href="https://stackoverflow.com/questions/24815082/css-media-queries-work-for-ipad2-ipad-air-samsung-galaxy-large-screens-but-no">CSS media queries work for iPad2, iPad Air, Samsung Galaxy, large screens but not the usual desktop screens</a>.</p>
  
  <p>Those discussions took place before the advent of the iPad Air. The iPad Air has a viewport of 2048 x 1536. I cannot find the webkit-min-device-pixel-ratio for it. I want to target the Air specifically because my AJAX site shrinks to half the size on it. This site is meant for landscape only.</p>
  
  <p>So...</p>
  
  <pre><code>@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  (-webkit-min-device-pixel-ratio: 1.0)
  </code></pre>
  
  <p>-> targets the old iPad 2's</p>
  
  <pre><code>@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  (-webkit-min-device-pixel-ratio: 2.0)
  </code></pre>
  
  <p>-> targets the iPad 3 &amp; 4 retinas but it does not target the Air</p>
  
  <p>I have tried variations of </p>
  
  <pre><code>@media only screen 
  and (min-device-width : 1536px) 
  and (max-device-width : 2048px) 
  and (-webkit-min-device-pixel-ratio: 2.0)
  </code></pre>
  
  <p>to try and get the Air to react. Who out there has had experience developing for the new Airs?</p>