Problemi con la regolazione del rapporto pixel del dispositivo per Android entro Phoneon

Question

Ho cercato di far funzionare correttamente le query multimediali su dispositivi con rapporti pixel di dispositivi diversi. Quando seleziono Nexus S dal menu, sembra fantastico.
Quando seleziono Nexus 4 dal menu, il posizionamento è disattivato.
da Chrome Dev Tools vedo che per il Nexus S lo stile calcolato è

(-webkit-max-device-pixel-ratio: 1) 

Per il Nexus 4:

(-webkit-max-device-pixel-ratio: 1.5) 

Questo è il mio 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; 
    } 
} 

E questo è il mio tag meta viewport:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/> 

Uso emulate.phonegap.com (Ripple AKA) per il test.

Answer 1

Non è possibile utilizzare -webkit-max-device-pixel-ratio, perché non è (ancora) supportato.

Ho aggiunto questa risposta, perché aiuta gli altri utenti con lo stesso problema a trovare la soluzione più veloce.

Answer 2

È venuto attraverso lo stesso problema e mi ha colpito la testa più di un giorno. Finalmente ho trovato la soluzione che la query multimediale utilizzata dal browser predefinito e WebKit di Cordova è completamente diversa.

Invece della pagina iniziale, utilizzare http://mqtest.io nella pagina iniziale di PhoneGap e controllare la query multimediale generata per quel particolare webkit. Usalo nella tua applicazione. In grado di indirizzare qualsiasi fattore di schermo.

Prova e fammi sapere se hai problemi.