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.

Answer 2

Came across the same issue and hit my head more than a day. Finally got the solution that the media query used by default browser and WebKit of Cordova is entirely different.

Instead of your home page use the http://mqtest.io in your PhoneGap start page and check the media query generated for that particular webkit. Use that in your application. Able to target any screen factors.

Try and Let me know if you have any issues.