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:
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
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
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)
This question/answer may help you: Is there any equivalent to Android's for Safari on the iPhone? which in turn points to this very useful article: http://davidbcalhoun.com/2010/viewport-metatag
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).
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here