Nexus 7 screen.width devuelve 800 pero media query max-width: 720px todavía se aplica

Question

Tengo una tableta Google Nexus 7 que estoy usando para probar algunos diseños receptivos. En Javascript, el screen.width regresa como 800px, como se esperaba (la resolución nativa).

¿Cómo es que la tableta detecta la siguiente consulta cuando el ancho máximo de la pantalla es> 720px?

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

Answer 1

Android hace una escala de densidad objetivo para acomodar las densidades de pantalla variables del ecosistema de Android. El navegador Android apunta a una densidad de pantalla media por defecto, tratando de emular el tamaño de los elementos como si la pantalla fuera una pantalla MDPI.

Usando this website, se puede ver que el resultado de esta escala es que device-width es 601 px y device-height es 880 px en el Nexus 7. Por lo tanto, cae dentro de su declaración max-width: 720px y el fondo aparece de color rojo.

window.screen.width y .height siempre devuelve el tamaño de la pantalla real. Debe recordar que Viewport Size y Screen Size son dos cosas completamente distintas.

Si no desea este comportamiento, puede agregar target-densitydpi=device-dpi a su etiqueta <meta name="viewport">. Esto desactivará la escala de densidad de destino de Android: device-width y device-height informarán la resolución de pantalla nativa del dispositivo.

Más información acerca de la escala de densidad de destino de Android está disponible en el Android Developers' Documentation.