Issues with adjusting to device pixel ratio for Android within Phonegap

Question

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.

Answer 1

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.