title: targeting iphone4 with responsive design (css media queries) as if lower res
body: <p>This must have been answered before, but I can't find a related question. </p>
  
  <p>I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide. </p>
  
  <p>Want I want is the iPhone4 (640 x 960) when in portrait mode (640 wide) to adhere to media queries as if it's display-width = 320 pixels instead. Rationale: even though the iphone has more pixels, I do want to display a simplified layout to those user, similar to users of non high-density phones. </p>
  
  <p>Any way to do this, by specifying some meta-tag for these high-pixel density phones for example? </p>
  
  <p>Of course, I could define separate media-queries for iphone 4 and the like with <code>min-device-pixel-ratio: 2</code> but this leads to separate css media queries (one for low and one for high pixel density)  which essentially have the same logic, which doesn't seem very DRY to me( <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself">http://en.wikipedia.org/wiki/Don%27t_repeat_yourself</a> ) </p>
  
  <p>Strange thing is: the new Ipad 3 , with pixel density 2, DOES correctly render the way I want, i.e: it mimics (at least as css media queries are concerned) a device with half the resolution. </p>