I have been trying to get media queries to work properly on devices with different device pixel ratios.
When I select Nexus S from the menu, it looks fantastic.
When I select Nexus 4 from the menu, the placement is off.
From Chrome Dev Tools I see that for the Nexus S the computed style is
(-webkit-max-device-pixel-ratio: 1)
For the Nexus 4:
(-webkit-max-device-pixel-ratio: 1.5)
This is my CSS:
@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 1.5 ){
.txt{
top: 170px;
left: 150px;
position:absolute;
font-size:60px;
}
}
@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 3 ) and(-webkit-min-device-pixel-ratio: 2 ){
.txt{
top: 270px;
left: 200px;
position:absolute;
font-size:60px;
}
}
And this is my meta viewport tag:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/>
I use emulate.phonegap.com (AKA Ripple) for testing.
You can't use -webkit-max-device-pixel-ratio
, because it's not (yet) supported.
I added this answer, because it helps other users with the same problem to find the solution quicker.