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

Si utiliza 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 y menús táctiles y ese tipo de cosas.

Es impactante para mí que parece ser la opinión popular que esto es deseable. No he averiguado si el diseño fluido / líquido antes de mobile se consideraba malo por las razones equivocadas o correctas. Me parece que esto es solo una versión más elegante de liquid layout, pero uno que los diseñadores están adoptando por alguna razón.

Cuando la comunidad de diseño en general eligió ponerse del lado de los diseños fijos sobre liquid 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 el código base era a menudo complicado de diseño en diseño para evitar que los elementos chocaran, etc. La única diferencia entre los diseños líquidos y el diseño sensible es que sensible, debido a los mejores navegadores y el la proliferación de marcos similares a los de la masonería hacen que sea más fácil de lograr.

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

Generalmente uso 3 puntos de interrupción: uno para teléfonos, uno para tabletas y uno para computadoras de 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 adaptativo y responsivo permite que el escritorio se comporte como un sitio de escritorio mientras me mantiene alejado de lo necesario para diseñar 10 y pico por separado diseños de dispositivos móviles de ancho fijo. El texto no se vuelve a ajustar en los dispositivos móviles porque no se puede cambiar el tamaño de la ventana.

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

Para IOS, parece ser simple, al menos con Safari. Parece ser una sola 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. Lo probé en el iPhone 4S y el 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 de navegador y la orientación.

Probé en una página con query (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 de navegador y la orientación. Esto hace que el ancho del dispositivo sea inutilizable.