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

81

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.

css responsive-design media-queries Jared
fuente
2
device-width ahora está obsoleto developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
Yukulélé

Respuestas:

111

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:

Josh Crozier
fuente
2
Esté de acuerdo con todo lo que dice, pero olvidándose de la compatibilidad con versiones anteriores, que no será relevante en unos años. ¿Por qué un sitio de escritorio debería funcionar de manera diferente porque ahora tenemos móviles?
John Magnolia
2
No creo que un sitio móvil deba mostrarse nunca en un escritorio. Debería poder cambiar el tamaño del navegador a cualquier ancho y usar la barra de desplazamiento horizontal. Supongamos que desea comparar una sección de 2 sitios pero ocultar la barra lateral, abriría en 2 ventanas y cambiaría el tamaño una al lado de la otra
John Magnolia
3
Estoy de acuerdo con John M, Google está equivocado, personalmente he encontrado que su 'documentación' de diseño receptivo es una de las peores cosas impulsadas por la moda que existen, dada la creencia solo porque los niños que lo escriben son empleados de Google. Inicialmente voté a favor de esto, pero la respuesta es incorrecta en mi opinión, solo porque cada vez más sitios están arruinando su experiencia de usuario de escritorio, de manera totalmente no necesariamente para ajustarse a un marco css receptivo de talla única (hecho solo para reducir el tiempo de desarrollo en mi opinión), no significa que tenga que arruinar la experiencia de usuario de su escritorio. No hacemos eso y hemos aumentado las conversiones por 10.
Lizardx
"Si esta etiqueta tiene un valor de contenido de width=device-width, el ancho de la pantalla coincidirá con los píxeles independientes del dispositivo". Y si está navegando en un dispositivo iOS, en lugar de dpscorresponder a, ¿a qué? puntos de iOS? (¡Muchas gracias por esta publicación, por cierto!)
in_flight
La respuesta está un poco desactualizada. No tiene nada de malo max-device-widthy es importante si desea utilizarlo en entornos de ventana gráfica de tamaño variable (escritorio). min-device-widthsigue siendo malo.
ShortFuse
6

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.

Håkan Olsson
fuente
1
device-width es la única forma confiable de conocer el dispositivo que está usando el usuario para que pueda ajustar el diseño en consecuencia. Cuando ajusta el diseño en función de los píxeles en la ventana gráfica, termina con un diseño móvil en algunas computadoras de escritorio solo porque el usuario hizo zoom. Eso a menudo resulta en lo contrario de lo que el usuario quería (que es solo un pequeño aumento)
Alice Wonder
Debe presentar informes de errores con navegadores móviles que no informan un ancho de dispositivo preciso. En muchos casos, descubrí que los navegadores alternativos estaban configurados de forma predeterminada para simular que eran un navegador de escritorio y usar 1 píxel de dispositivo por píxel CSS, y ese es probablemente el problema que estaba teniendo.
Alice Wonder
5

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.

Paul Fox
fuente
2
Hay algunos móviles en los que se puede cambiar el tamaño de la ventana gráfica; por ejemplo, Windows permite "encajar" varias aplicaciones en la pantalla, y algunos teléfonos Android admiten ventanas para ver dos aplicaciones a la vez. Objetivamente, no veo por qué no querría un diseño de estilo tableta en un escritorio con pantalla más pequeño, pero subjetivamente depende del diseño.
Marcos
2
También estaba usando min / max-device-width pero luego, para mi horror, un cliente configuró hotjar, que crea pequeños videos de la interacción del usuario con su sitio, y me di cuenta de que el nuevo Android 6 Samsung Galaxy 6 estaba tratando el recuento de píxeles de min. / max-device-width como los píxeles reales de la pantalla, no los píxeles css, lo que, por supuesto, hizo que la página saliera de la pantalla. En nuestro caso, lo que sucedió fue que los usuarios estaban obteniendo con estas pantallas de densidad de píxeles 4x una mezcla de css móvil y de escritorio. Personalmente, no creo que la capacidad de respuesta tenga cabida en una pantalla de escritorio bien hecha, lo que es malo para los usuarios. Así que ten cuidado.
Lizardx
2
Paul, se requirió algo de investigación para averiguar qué estaba pasando. En mi opinión, la respuesta de Josh es incorrecta, al igual que la de Google. La noción de que los escritorios deben ser receptivos es solo una moda que está impulsando grupos como Google y los distintos marcos de css de talla única. Nuestro problema vino de una mala programación de hotjar, punto. Mis puntos de activación básicamente tratan cualquier dispositivo grande con pantalla como un escritorio, con algunos ajustes, luego bajan a donde el puerto de visualización solo sería un dispositivo móvil. Para los usuarios que buscan claridad, consideraría la respuesta de Paul como correcta y las respuestas receptivas impulsadas por la moda como incorrectas.
Lizardx
1
Para su información: a partir de 2018, la *-device-widthfunción de medios ha quedado obsoleta en el último borrador de especificación de consulta de medios - drafts.csswg.org/mediaqueries-4/#mf-deprecated
Josh Crozier
Esta es una respuesta antigua, pero incluso en 2014 estaría totalmente en desacuerdo con esto. Los errores tipográficos a los que se hace referencia y los "elementos que chocan" se evitan fácilmente si se hace un hábito de seguir las buenas prácticas. La resolución de la pantalla se está volviendo loca y verdadera, el diseño escalable y receptivo solo será más importante a medida que pase el tiempo, mientras que los sitios fijos solo se volverán más inaccesibles.
hombrecito diminuto