Problemy z dostosowaniem do współczynnika pikseli urządzenia dla systemu Android w ramach Phonegap

Question

Próbowałem sprawić, aby zapytania o multimedia działały poprawnie na urządzeniach o różnych współczynnikach pikseli urządzenia. Po wybraniu Nexusa S z menu wygląda fantastycznie.
Po wybraniu z menu Nexusa 4 miejsce docelowe jest wyłączone.
Od Chrome Dev Narzędzia widzę, że dla Nexus S styl kalkulowana jest

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

W przypadku Nexusa 4:

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

To jest mój 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; 
    } 
} 

A to jest mój znacznik meta viewport:

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

Używam emulate.phonegap.com (AKA Ripple) do testowania.

Answer 1

Nie można użyć -webkit-max-device-pixel-ratio, ponieważ nie jest (jeszcze) obsługiwany.

Dodałem tę odpowiedź, ponieważ pomaga to innym użytkownikom z tym samym problemem znaleźć rozwiązanie szybciej.

Answer 2

Przyszedłem na tę samą sprawę i uderzyłem się w głowę dłużej niż jeden dzień. W końcu otrzymałem rozwiązanie, że zapytanie o media używane przez domyślną przeglądarkę i WebKit w Cordova jest zupełnie inne.

Zamiast swojej strony głównej, użyj strony http://mqtest.io na stronie początkowej PhoneGap i sprawdź zapytanie o media wygenerowane dla danego zestawu stron internetowych. Użyj tego w swojej aplikacji. Potrafi ukierunkować dowolne czynniki ekranowe.

Spróbuj i daj mi znać, jeśli masz jakiekolwiek problemy.