This must have been answered before, but I can't find a related question.
I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide.
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.
Any way to do this, by specifying some meta-tag for these high-pixel density phones for example?
Of course, I could define separate media-queries for iphone 4 and the like with min-device-pixel-ratio: 2
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( http://en.wikipedia.org/wiki/Don%27t_repeat_yourself )
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.