¿Debo usar max-device-width o max-width?

Question 1

Con las consultas de medios CSS, puede utilizar max-device-widthpara orientar el ancho de un dispositivo (como un dispositivo iPhone o Android) y / o un max-widthancho de página.

Si usa max-device-width, cuando cambia el tamaño de la ventana del navegador en su escritorio, el CSS no cambiará, porque su escritorio no cambia de tamaño.

Si lo usa max-width, cuando cambia el tamaño de la ventana del navegador en su escritorio, es posible que se le muestre un estilo orientado a dispositivos móviles, como elementos táctiles y menús y ese tipo de cosas.

La orientación a navegadores (¿y dispositivos?) Específicos ahora está obsoleta y debería ser un poco más agnóstico con respecto a lo que apunta. ¿Eso también se aplica a las consultas de medios?

¿Por qué apuntarías a uno sobre el otro? Cual es el recomendado?

Este es un ejemplo de una consulta de medios que uso en un sitio web de producción:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

Tiendo a usar ambos max-device-widthy max-width.

Question 2

TL; DR

Si está creando un sitio web receptivo, use min-width/ max-widthen sus consultas de medios en lugar de min-device-width/ max-device-widthpara apuntar a una gama más amplia de tamaños de pantalla.

Según el borrador de la especificación de 2018 Media Queries Level 4 , la device-widthfunción de medios está obsoleta . Se mantendrá por compatibilidad con versiones anteriores, pero debe evitarse.

8. Apéndice A: Funciones multimedia obsoletas

Para consultar el tamaño de la ventana gráfica (o el cuadro de página en los medios de la página), se deben usar las funciones width, heighty aspect-ratiomedios, en lugar de device-width, device-heighty device-aspect-ratio, que se refieren al tamaño físico del dispositivo independientemente de la cantidad de espacio disponible para el documento que se está presentando. Las device-*funciones multimedia también se utilizan a veces como un proxy para detectar dispositivos móviles. En su lugar, los autores deben usar funciones de medios que representen mejor el aspecto del dispositivo contra el que intentan diseñar.

Como nota al margen, recuerde especificar una metaetiqueta de ventana gráfica en la <head>sección de su documento:

<meta name="viewport" content="width=device-width, initial-scale=1">

Explicación

Debido a todas las diferentes resoluciones de pantalla y densidades de píxeles posibles que puede tener un dispositivo determinado, un píxel no es un píxel porque hay varias cosas a tener en cuenta (zoom, densidad de píxeles, resolución y tamaño de la pantalla, orientación del dispositivo, relación de aspecto, etc. ..). En este caso, un píxel se denomina en realidad una "unidad de referencia óptica" en lugar de un píxel de hardware físico.

Afortunadamente, puede especificar una metaetiqueta de ventana gráfica en la <head>sección de su documento para controlar el ancho y la escala de la ventana gráfica del navegador. Si esta etiqueta tiene un contentvalor de width=device-width, el ancho de la pantalla coincidirá con los píxeles independientes del dispositivo y garantizará que todos los dispositivos diferentes escalen y se comporten de manera consistente.

<meta name="viewport" content="width=device-width, initial-scale=1">

En términos de consultas de medios, probablemente querrá usar en max-widthlugar de max-device-width, ya que max-widthapuntará a la ventana gráfica (ventana actual del navegador), mientras que max-device-widthapuntará al tamaño / resolución de pantalla completa real del dispositivo.

En otras palabras, si está utilizando max-device-width, no verá diferentes consultas de medios aplicadas al cambiar el tamaño de su navegador de escritorio, porque max-width, a diferencia , solo se tiene en cuenta el tamaño de pantalla completa real del dispositivo; no el tamaño actual de la ventana del navegador.

Esto marca una gran diferencia si está tratando de crear un diseño adaptable porque el sitio no responderá al cambiar el tamaño del navegador. Además, si está utilizando max-device-widthlas consultas de medios que está utilizando para apuntar a dispositivos con pantallas más pequeñas, no se aplicarán a los escritorios, incluso cuando se cambia el tamaño de la ventana del navegador para que coincida con dicho tamaño de pantalla más pequeño.

A partir de 2018, el último borrador de la especificación de consulta de medios ha dejado de utilizar la device-widthfunción de medios, por lo que debe evitarse.

Además, este artículo sobre desarrolladores de Google desaconseja el uso de max-device-width:

Desarrolladores de Google - Conceptos básicos de la Web - Consultas de medios CSS receptivas

También es posible crear consultas basadas en *-device-width; aunque esta práctica está fuertemente desaconsejada .

La diferencia es sutil pero muy importante: min-widthse basa en el tamaño de la ventana del navegador, mientras que min-device-widthse basa en el tamaño de la pantalla. Lamentablemente, algunos navegadores, incluido el navegador Android heredado, pueden no informar el ancho del dispositivo correctamente y, en cambio, informar el tamaño de la pantalla en píxeles del dispositivo en lugar del ancho esperado de la ventana gráfica.

Además, el uso *-device-widthpuede evitar que el contenido se adapte en los escritorios u otros dispositivos que permitan cambiar el tamaño de las ventanas porque la consulta se basa en el tamaño real del dispositivo, no en el tamaño de la ventana del navegador.

Otras lecturas:

Question 3

Evite el ancho del dispositivo. La razón es que no puede saber cómo responden los navegadores de los usuarios.

Para IOS, parece simple, al menos con Safari. Parece ser una única respuesta de ancho de dispositivo independiente de la orientación. Además, el ancho del dispositivo se indica solo para el lado más corto del dispositivo. Probé esto en iPhone 4S y iPad. Respondieron a 320 y 768 respectivamente sin importar la orientación.

Para Android es más impredecible. Probé seis navegadores en un Huawei Ascend Y330 (navegador predeterminado de Android, Chrome, Opera, Firefox, Firefox Beta, Dolphin). La respuesta varía según el tipo y la orientación del navegador.

Probé en una página con consulta (max-device-width: *** px) y para averiguar qué valor px necesito completar para obtener la consulta en un estado verdadero. Se necesitaban cuatro valores diferentes (320, 480, 534, 800) según el tipo de navegador y la orientación. Esto inutiliza el ancho del dispositivo.

Question 4

Si usa el ancho máximo, cuando cambia el tamaño de la ventana del navegador en su escritorio, es posible que se le muestre un estilo orientado a dispositivos móviles, como elementos táctiles y menús y ese tipo de cosas.

Me sorprende que parezca que la opinión popular es que esto es deseable. No he descubierto si el diseño fluido / líquido antes del móvil se consideraba malo por las razones correctas o incorrectas. Me parece que esta es solo una versión más elegante del diseño líquido, pero que los diseñadores están adoptando por alguna razón.

Cuando la comunidad de diseño en general decidió ponerse del lado de los diseños fijos en lugar de los líquidos a mediados de la década de 2000, fue porque los reflujos de texto impedían la legibilidad, lo que a menudo resultaba en viudas y otros artefactos tipográficos. Además, mantener la base de código a menudo era complicado desde el diseño hasta el diseño para evitar que los elementos colisionen, etc. La única diferencia entre los diseños líquidos y el diseño receptivo es que el receptivo, debido a mejores navegadores y la proliferación de marcos similares a mampostería, lo hace más fácil de lograr.

Yo personalmente uso min / max-device-width porque prefiero seguir las convenciones de documentos de escritorio que tienen décadas de precedencia. No todos los documentos que abra en Internet se comportarán de esta manera en un escritorio, ni otros tipos de documentos o aplicaciones que cargue en su escritorio. Las páginas diseñadas antes del dominio de los dispositivos móviles, al igual que MS Word, Photoshop, etc., mantienen sus posiciones de desplazamiento y no cambian sus diseños, lo que permite a los usuarios realizar un seguimiento del contenido dentro del flujo de la página cuando realizan la tarea no relacionada de la gestión de ventanas.

Generalmente uso 3 puntos de interrupción: uno para teléfonos, uno para tableta y otro para escritorio. El escritorio y, a menudo, al menos el retrato horizontal, son fijos y el retrato de la tableta y debajo son líquidos. Esta combinación de adaptabilidad y capacidad de respuesta permite que el escritorio se comporte como un sitio de escritorio mientras me evita la necesidad de diseñar diez diseños de dispositivos móviles separados de ancho fijo. El texto no se redistribuye en los dispositivos móviles porque no se puede cambiar el tamaño de la ventana gráfica.