¿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-widthy 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 real del dispositivo

Lo mismo va para max-heighty max-device-heightnaturalmente.

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

max-device-widthse refiere al tamaño de la vista del dispositivo, independientemente de la orientación, la escala actual o el cambio de tamaño. Esto no cambiará en un dispositivo, por lo que no se puede usar para cambiar hojas de estilo o directivas CSS a medida que se gira o cambia el tamaño de la pantalla.

¿Qué opinas sobre usar este estilo?

Para todos los puntos de interrupción que son principalmente para "dispositivo móvil" que uso min(max)-device-widthy para los puntos de interrupción que son principalmente para uso de "escritorio" min(max)-width.

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

Mire 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 es el ancho de representación del dispositivo

@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 de destino, el tamaño actual del navegador.

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

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 real del dispositivo.

• 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 una configuración de consulta de medios diferente;

• Si está utilizando el ancho máximo , cuando cambia el tamaño del navegador en su escritorio, el CSS cambiará a una configuración de consulta de medios diferente y es posible que se muestre con el estilo para móviles, como menús táctiles.

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

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

No use más el ancho / altura del dispositivo.

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

Solo use ancho / alto (sin mínimo / máximo) en combinación con orientación y resolución (mínimo / máximo) para apuntar a dispositivos específicos. En el móvil, el ancho / alto debe ser igual al ancho / alto del dispositivo.