Media queries and device pixel ratio
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.
The page has currently this viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
The style sheets are supposed to target widths R < 640px, 640px <= R < 960px and 960px <= R. The layout will, respectively, be 320px, 640px and 960px wide.
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 < 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?
The current media queries for each layout (320, 640, 960, respectively) are:
@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)
Answer
This question/answer may help you: Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone? which in turn points to this very useful article: http://davidbcalhoun.com/2010/viewport-metatag
<meta name="viewport" content="target-densitydpi=device-dpi" />
Should make you aware that this seems to be a suitable solution for Android, but maybe not work on iOS devices (don't have a Mac or an iPhone to hand to confirm).