¿Cuál es la diferencia entre max-device-width y max-width para web móvil?

Necesito desarrollar algunas páginas html para teléfonos iphone / android, pero ¿cuál es la diferencia entre max-device-width y max-width ? Necesito usar diferentes CSS para diferentes tamaños de pantalla.

 @media all and (max-device-width: 400px) @media all and (max-width: 400px) 

¿Cual es la diferencia?

max-width es el ancho del área de visualización de destino, por ejemplo, el navegador

max-device-width es el ancho del área de representación completa del dispositivo, es decir, la pantalla del dispositivo real

Lo mismo ocurre con max-height max-device-height y la max-height max-device-height forma natural.

max-width refiere al ancho de la ventana gráfica y se puede usar para apuntar a tamaños u orientaciones específicos junto con max-height . Al usar condiciones max-width (o min-width ), puede cambiar el estilo de la página a medida que cambia el tamaño del navegador o cambia la orientación en un dispositivo como un iPhone.

max-device-width hace referencia al tamaño de la ventana gráfica del dispositivo, independientemente de su orientación, escala actual o cambio de tamaño. Esto no cambiará en un dispositivo, por lo que no se puede usar para cambiar las hojas de estilo o las directivas CSS a medida que se gira o cambia el tamaño de la pantalla.

¿Qué piensas acerca de usar este estilo?

Para todos los puntos de interrupción que son principalmente para “dispositivo móvil”, utilizo el min(max)-device-width y para los puntos de corte que son principalmente para “escritorio”, uso de min(max)-width .

Hay muchos “dispositivos móviles” que calculan mal el ancho.

Mira http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

 /* #### Mobile Phones Portrait #### */ @media screen and (max-device-width: 480px) and (orientation: portrait){ /* some CSS here */ } /* #### Mobile Phones Landscape #### */ @media screen and (max-device-width: 640px) and (orientation: landscape){ /* some CSS here */ } /* #### Mobile Phones Portrait or Landscape #### */ @media screen and (max-device-width: 640px){ /* some CSS here */ } /* #### iPhone 4+ Portrait or Landscape #### */ @media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){ /* some CSS here */ } /* #### Tablets Portrait or Landscape #### */ @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ /* some CSS here */ } /* #### Desktops #### */ @media screen and (min-width: 1024px){ /* some CSS here */ } 

max-device-width tendrá valores constantes (probablemente dos)

 @media all and (max-device-width: 400px) { /* styles for devices with a maximum width of 400px and less Changes only on device orientation */ } @media all and (max-width: 400px) { /* styles for target area with a maximum width of 400px and less Changes on device orientation , browser resize */ } 

El ancho máximo es el ancho del área de visualización objective significa el tamaño actual del navegador.

Si está haciendo una aplicación multiplataforma (por ejemplo, usando phonegap / cordova), entonces,

No use el ancho del dispositivo o la altura del dispositivo. Más bien use ancho o alto en las consultas de medios de CSS porque el dispositivo Android dará problemas en el ancho del dispositivo o altura del dispositivo. Para iOS funciona bien. Solo los dispositivos Android no son compatibles con el ancho del dispositivo / altura del dispositivo.

la diferencia es que max-device-width es todo el ancho de la pantalla y max-width es el espacio utilizado por el navegador para mostrar las páginas. Pero otra diferencia importante es la compatibilidad con los navegadores Android, de hecho, si vas a usar max-device-width esto funcionará solo en Opera, en cambio estoy seguro de que el ancho máximo funcionará para todo tipo de navegador móvil ( Lo probé en Chrome, Firefox y Opera para Android).

No use el dispositivo de ancho / alto nunca más.

el ancho del dispositivo, la altura del dispositivo y la relación de aspecto del dispositivo están en desuso en Media Queries Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Solo use ancho / alto (sin min / max) en combinación con la orientación y la resolución (min / max-) para apuntar a dispositivos específicos. El ancho / alto del dispositivo móvil debe ser el mismo que el ancho / alto del dispositivo.

max-width es el ancho del área de visualización de destino, por ejemplo, el navegador; max-device-width es el ancho del área de representación del dispositivo, es decir, la pantalla del dispositivo real.

• Si está utilizando el ancho máximo del dispositivo , cuando cambia el tamaño de la ventana del navegador en su escritorio, el estilo CSS no cambiará a la configuración de consulta de medios diferentes;

• Si usa el ancho máximo , cuando cambie el tamaño del navegador en su escritorio, el CSS cambiará a la configuración de consulta de medios diferentes y es posible que se muestre con el estilo de los teléfonos móviles, como los menús amigables para tocar.