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

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

max-device-width se 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 como la pantalla se gira o cambia de tamaño.

¿Qué opinas de usar este estilo?

Para todos los puntos de interrupción que son principalmente para "dispositivo móvil" utilizo min(max)-device-width y para los puntos de interrupción que son principalmente para "escritorio" uso 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 de destino significa 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 funcionará solo en Opera, en cambio estoy seguro de que max-width funcionará para todo tipo de navegador móvil (lo probé en Chrome, firefox y opera para ANDROID).

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

No utilice el ancho o el alto del dispositivo. En lugar de usar ancho o alto en las consultas de medios CSS porque el dispositivo Android dará problemas en el ancho del dispositivo o la altura del dispositivo. Para iOS funciona bien. Solo los dispositivos Android no admiten ancho/altura del dispositivo.

Ya no use device-width/height.

Device-width, device-height y device-aspect-ratio están obsoletos en Media Queries Nivel 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Solo use ancho/alto (sin min/max) en combinación con orientación y resolución (min/max-)para apuntar a dispositivos específicos. En el ancho/alto 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 de todo el área de representación del dispositivo, es decir, la pantalla real del dispositivo.

* Si está utilizando max-device-width , cuando cambie 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 max-width , cuando cambie 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 le muestre con el estilo para móviles,como menús táctiles.