title: CSS media queries issue with iOS devices
body: <p>I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can't test the iPhone4 at the moment.) Any ideas?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /&gt;
  &lt;link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="ipad3" style="width:200px;height:200px;border:1px solid black"&gt;&lt;/div&gt;
  &lt;div id="ipad2" style="width:200px;height:200px;border:1px solid black"&gt;&lt;/div&gt;
  &lt;div id="iphone4" style="width:200px;height:200px;border:1px solid black"&gt;&lt;/div&gt;
  &lt;div id="iphone3" style="width:200px;height:200px;border:1px solid black"&gt;&lt;/div&gt;
  
  ipad3 should be RED
  &lt;br&gt;
  ipad2 should be GREEN
  &lt;br&gt;
  iphone4 should be BLUE
  &lt;br&gt;
  iphone3 should be ORANGE
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>..and the 4 css files are coded accordingly (this example is the iPad3.css file):</p>
  
  <pre><code>#ipad3 { background-color: red; }
  </code></pre>