title: Combining max-width and min-device-pixel-ratio
body: <p>I've been asked to make different responsive layouts for tablets, depending on if they are high pixel density displays or not.  </p>
  
  <p>This code, which would target an iPhone 5s in landscape, doesn't seem to work. Is it possible?</p>
  
  <pre><code>@media
  only screen ( min-width: 568px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen ( min-width: 568px) and ( min--moz-device-pixel-ratio: 1.25),
  only screen ( min-width: 568px) and ( -o-min-device-pixel-ratio: 1.25/1),
  only screen ( min-width: 568px) and ( min-device-pixel-ratio: 1.25),
  only screen ( min-width: 568px) and ( min-resolution: 200dpi),
  only screen ( min-width: 568px) and ( min-resolution: 1.25dppx)
  {
      body {
          background-color: maroon;               
      }               
  }
  </code></pre>
  
  <p>By nesting the min-width inside the queries for dpi it seems to be working (I haven't tested on a large arsenal of devices).  I've never heard of this being done, is it safe to do?</p>
  
  <pre><code>@media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and ( min--moz-device-pixel-ratio: 1.25),
  only screen and ( -o-min-device-pixel-ratio: 1.25/1),
  only screen and ( min-device-pixel-ratio: 1.25),
  only screen and ( min-resolution: 200dpi),
  only screen and ( min-resolution: 1.25dppx)
  {
      @media only screen and ( min-width: 568px) {
          body {
              background-color: maroon;               
          }
      }       
  }   
  </code></pre>