Qual é a diferença entre max-device-width e max-width para web móvel?

Preciso desenvolver algumas páginas html para telefones iphone / android, mas qual é a diferença entre max-device-widthe max-width? Eu preciso usar css diferentes para diferentes tamanhos de tela.

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

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

Qual é a diferença?

max-width é a largura da área de exibição de destino, por exemplo, o navegador

max-device-width é a largura de toda a área de renderização do dispositivo, ou seja, a tela real do dispositivo

O mesmo vale para max-heighte max-device-heightnaturalmente.

max-widthrefere-se à largura da janela de visualização e pode ser usado para direcionar tamanhos ou orientações específicas em conjunto com max-height. Usando várias condições max-width(ou min-width), você pode alterar o estilo da página à medida que o navegador é redimensionado ou a orientação muda em um dispositivo como um iPhone.

max-device-widthrefere-se ao tamanho da janela de visualização do dispositivo, independentemente da orientação, escala atual ou redimensionamento. Isso não muda em um dispositivo, portanto não pode ser usado para alternar folhas de estilo ou diretivas CSS, à medida que a tela é girada ou redimensionada.

O que você acha de usar esse estilo?

Para todos os pontos de interrupção que são principalmente para "dispositivos móveis" eu uso min(max)-device-widthe para pontos de interrupção que são principalmente para uso "desktop" min(max)-width.

Existem muitos "dispositivos móveis" que calculam mal a largura.

Veja 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 é a largura de renderização do 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 */
}

A largura máxima é a largura da área de exibição de destino, o tamanho atual do navegador.

a diferença é que max-device-width é a largura de toda a tela e max-width significa o espaço usado pelo navegador para mostrar as páginas. Mas outra diferença importante é o suporte a navegadores Android; de fato, se você usará a largura máxima do dispositivo, isso funcionará apenas no Opera; em vez disso, tenho certeza de que a largura máxima funcionará para todos os tipos de navegadores móveis ( Eu testei no Chrome, Firefox e Opera para ANDROID).

max-width é a largura da área de exibição de destino, por exemplo, o navegador; max-device-width é a largura de toda a área de renderização do dispositivo, ou seja, a tela real do dispositivo.

• Se você estiver usando a largura máxima do dispositivo , quando alterar o tamanho da janela do navegador na área de trabalho, o estilo CSS não será alterado para uma configuração de consulta de mídia diferente;

• Se você estiver usando a largura máxima , quando alterar o tamanho do navegador na área de trabalho, o CSS mudará para uma configuração de consulta de mídia diferente e você poderá ver o estilo de celulares, como menus amigáveis ​​ao toque.

Se você estiver criando um aplicativo de plataforma cruzada (por exemplo, usando phonegap / cordova),

Não use largura ou altura do dispositivo. Em vez disso, use largura ou altura nas consultas de mídia CSS, porque o dispositivo Android causará problemas na largura ou altura do dispositivo. Para iOS, funciona bem. Apenas dispositivos Android não suportam largura / altura do dispositivo.

Não use mais a largura / altura do dispositivo.

largura do dispositivo, altura do dispositivo e proporção de aspecto do dispositivo foram descontinuados no nível 4 de consultas de mídia: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Basta usar largura / altura (sem min / max) em combinação com orientação e resolução (min / max-) para segmentar dispositivos específicos. No celular, a largura / altura deve ser igual à largura / altura do dispositivo.