title: Media queries and device pixel ratio
body: <p>I'm in the process of redesigning my website and I've decided to take a shot at responsive layout. I'm new to CSS3 media queries and can't figure out how to make the site behave as intended on my smartphone.</p>
  
  <p>The page has currently this viewport meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>I'm not sure what it does, as I don't see a difference between having and not having this in my HTML, but was told that it was somehow useful.</p>
  
  <p>The style sheets are supposed to target widths R &lt; 640px, 640px &lt;= R &lt; 960px and 960px &lt;= R. The layout will, respectively, be 320px, 640px and 960px wide.</p>
  
  <p>The issue I'm facing is with my smartphone (and possibly all modern high pixel density handheld devices). My smartphone has a physical resolution of 480x800px, but in landscape mode, reports the width of 533px (its pixel ratio is 1.5 and 800/1.5 = 533.33, so I guess this is the expected value). Since 533 &lt; 640, the displayed layout is the narrowest one: 320px. I know the medium one looks good on the smartphone and would prefer to use that. What should I do to make the smartphone display the 640px layout in landscape mode without breaking the current rules that work for desktop browsers with 1:1 pixel ratio?</p>
  
  <p>The current media queries for each layout (320, 640, 960, respectively) are:</p>
  
  <pre><code>@media only screen and (max-width: 639px)
  
  @media only screen and (min-width: 640px) and (max-width: 959px)
  
  @media only screen and (min-width: 960px)
  </code></pre>