Nexus 7 screen.width zwraca 800, ale zapytanie o media max-width: 720px nadal obowiązuje

Question

Mam tablet Google Nexus 7, którego używam do testowania niektórych responsywnych projektów. W JavaScript, screen.width zwraca jako 800px, zgodnie z oczekiwaniami (natywna rozdzielczość).

W jaki sposób następująca próba nośnika jest odbierana przez tablet, gdy maksymalna szerokość ekranu wynosi> 720 pikseli?

@media only screen and (max-width: 720px) and (orientation: portrait) { 
    .test{ background: red;} 
} 

Answer 1

Android dokonuje docelowego skalowania gęstości w celu dostosowania do różnych gęstości ekranu ekosystemu Android. Domyślnie w przeglądarce na Androida dominuje gęstość średniego ekranu, starając się emulować rozmiar elementów tak, jakby ekran był ekranem MDPI.

Korzystanie this website, można zobaczyć, że efektem tego jest to, że device-width skalowania jest 601 px i device-height jest 880 px na Nexusa 7. W związku z tym objęte swojej deklaracji max-width: 720px a tło pojawia się na czerwono.

window.screen.width i .height zawsze zwraca rzeczywisty rozmiar ekranu. Musisz pamiętać, że rozmiar ekranu Viewport Size i Screen Size to dwie różne rzeczy.

Jeśli nie chcesz tego zachowania, możesz dodać target-densitydpi=device-dpi do tagu <meta name="viewport">. Spowoduje to wyłączenie skalowania gęstości docelowej Androida: device-width i device-height będą zgłaszać natywną rozdzielczość ekranu urządzenia.

Więcej informacji na temat skalowania gęstości docelowej systemu Android można znaleźć w artykule Android Developers' Documentation.