todos - responsive css

¿Debo usar max-device-width o max-width? (3)

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

Es impactante para mí que parece ser una opinión popular que esto es deseable. No he descubierto si el diseño líquido / líquido antes del móvil se consideró malo por los motivos incorrectos o correctos. 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 optó por ponerse de lado con diseños fijos sobre el líquido a mediados de la década de 2000, fue porque el reflujo de texto impedía la legibilidad que a menudo resultaba en viudas y otros artefactos tipográficos. Además, mantener la base de código fue complicado desde el diseño hasta el diseño para evitar colisiones entre elementos, etc. La única diferencia entre los diseños de líquidos y el diseño receptivo es que responden bien, debido a los navegadores mejorados y la proliferación de estructuras similares a mampostería que facilitan su realización.

Yo personalmente uso el ancho mínimo / máximo del dispositivo porque prefiero seguir las convenciones de documentos de escritorio que tienen décadas de precedencia. No todos los documentos que abre 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, como MS Word, Photoshop, etc. mantienen sus posiciones de desplazamiento y no cambian sus diseños, lo que les permite a los usuarios realizar un seguimiento del contenido dentro del flujo de páginas al realizar la tarea independiente de administración de ventanas.

Generalmente uso 3 puntos de interrupción: uno para teléfonos, uno para tableta y uno para escritorio. El escritorio y, a menudo, al menos el retrato del paisaje están fijos y el retrato de la tableta y debajo son líquidos. Esta combinación de capacidad de adaptación y capacidad de respuesta permite que el escritorio se comporte como un sitio de escritorio y me impida el diseño necesario de 10 dispositivos de ancho fijo separados por separado. El texto no vuelve a fluir en los dispositivos móviles porque no se puede cambiar el tamaño de la ventana gráfica.

Con las consultas de medios de CSS puede usar max-device-width para apuntar al max-device-width de un dispositivo (como un iPhone o dispositivo Android) y / o un max-width que se dirige a un ancho 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 usa max-width , cuando cambie el tamaño de la ventana del navegador en su escritorio, es posible que le muestren un estilo orientado a dispositivos móviles, como elementos y menús amigables para el tacto y ese tipo de cosas.

La orientación de navegadores específicos (¿y dispositivos?) Ahora está en desuso y usted debería ser un poco más agnóstico con lo que apunta. ¿Eso se aplica a las consultas de los medios también?

¿Por qué apuntarías uno sobre el otro? ¿Cuál 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 tanto max-device-width como max-width .

TL; DR

Si está creando un sitio web receptivo, probablemente desee usar min-width / min-width max-width lugar de max-width min-device-width / min-device-width max-device-width para orientar un rango más amplio de tamaños de pantalla.

Recuerde especificar una metaetiqueta de ventana en la sección <head> de su documento:

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

Explicación

Debido a todas las diferentes resoluciones de pantalla posibles y densidades de píxeles que un dispositivo dado puede tener, 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 en realidad se denomina "unidad de referencia óptica" en lugar de un píxel de hardware físico.

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

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

En términos de consultas de medios, es probable que desee utilizar max-width lugar de max-device-width , ya que max-width se enfocará en la ventana gráfica actual (view view), mientras que max-device-width se enfocará en la pantalla completa real del dispositivo tamaño / resolución.

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

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

Este artículo sobre Desarrolladores de Google desalienta al max-device-width el uso del max-device-width :

Google Developers - Web Fundamentals - Responsive CSS media queries
También es posible crear consultas basadas en *-device-width ; aunque esta práctica es fuertemente desaconsejada .
La diferencia es sutil pero muy importante: min-width se basa en el tamaño de la ventana del navegador, mientras min-device-width se basa en el tamaño de la pantalla. Lamentablemente, algunos navegadores, incluido el navegador heredado de Android, pueden no informar correctamente el ancho del dispositivo y, en su lugar, informar el tamaño de la pantalla en los píxeles del dispositivo en lugar del ancho esperado de la ventana gráfica.
Además, el uso de *-device-width puede evitar que el contenido se *-device-width en los escritorios u otros dispositivos que permiten redimensionar 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:

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

Para IOS, parece ser 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 establece solo para el lado más corto del dispositivo. Lo probé en el iPhone 4S y iPad. Respondieron 320 y 768, respectivamente, sin importar su orientación.

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

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 necesitaron cuatro valores diferentes (320, 480, 534, 800) dependiendo del tipo y orientación del navegador. Esto hace que el ancho del dispositivo inutilizable.