Nexus 7 screen.width restituisce 800 ma media query max-width: 720px si applica ancora

Question

Ho un tablet Google Nexus 7 che sto usando per testare alcuni progetti reattivi. In Javascript, lo screen.width restituisce 800px come previsto (la risoluzione nativa).

Come mai la seguente media query viene rilevata dal tablet quando la larghezza massima dello schermo è> 720px?

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

Answer 1

Android esegue il ridimensionamento della densità del target per adattarsi alle diverse densità dello schermo dell'ecosistema Android. Per impostazione predefinita, il browser Android ha come target una densità media dello schermo, cercando di emulare la dimensione degli elementi come se lo schermo fosse uno schermo MDPI.

Utilizzando this website, si può vedere che il risultato di questa scala è che device-width è 601 px e device-height è 880 px sul Nexus 7. Pertanto, rientra nel tuo dichiarazione max-width: 720px e lo sfondo appare rossa.

window.screen.width e .height restituisce sempre la dimensione effettiva dello schermo. È necessario ricordare che le dimensioni dello Viewport e le dimensioni dello schermo sono due cose completamente diverse.

Se non si desidera questo comportamento, è possibile aggiungere target-densitydpi=device-dpi al tag <meta name="viewport">. Questo disabiliterà il ridimensionamento della densità target Android: device-width e device-height segnalerà la risoluzione nativa dello schermo del dispositivo.

Ulteriori informazioni sul ridimensionamento della densità di destinazione di Android sono disponibili nello Android Developers' Documentation.