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

242

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?

virsir
fonte
4
Relacionado: Devo usar max-device-width ou max-width?
Josh Crozier 25/03
1
Eu descobri que max-device-widthfunciona mesmo se <meta name="viewport" ...>tag não está incluído para dispositivos de tela pequena e max-widthnão funciona sem uma metatag
Faizan Akram Dar

Respostas:

252

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.

Ian Devlin
fonte
15
Se você quiser ver a alteração ao redimensionar seu navegador, use a largura máxima para desenvolvimento, embora a largura máxima do dispositivo seja mais precisa para a produção.
John Magnolia
31
@JohnMagnolia O que faz você pensar que a largura máxima do dispositivo é melhor para a produção? A largura máxima não garantiria melhor capacidade de resposta, independentemente do dispositivo?
e_known
8
@eknown Concordo. Usuários de todo o espectro de habilidade / conhecimento nem sempre têm a janela do navegador de mesa maximizada (mas ainda não vi um tablet ou telefone com um navegador NÃO aberto maximizado - suponho que seja possível em um aplicativo híbrido, mas que é um caso diferente). A largura máxima certamente seria mais universal.
Jason
2
@eknown discordo. Dependendo do seu estilo, você pode ter uma aparência muito diferente depois de atingir esse ponto de interrupção da mídia e, se estiver carregando folhas de estilo com base nos pontos de interrupção da mídia, pode ser muito chocante para o site ter uma aparência totalmente diferente ao redimensionar a janela do navegador.
TwinPrimesAreEz
2
Se você tem um layout radicalmente diferente para dispositivos móveis, provavelmente o motivo principal é porque não há cursor do mouse (eles precisam de botões maiores e uma única coluna para rolar). Uma ótima consulta de mídia a ser usada nesse caso é a @media screen and (pointer: coarse) and (hover: none)que mudará para a versão móvel, independentemente de quantos pixels os dispositivos móveis colocarem em suas telas no futuro.
EoghanM
81

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.

voncox
fonte
11
Esta resposta tornou "clique" para mim melhor do que a resposta aceita. Parece ser para a maioria dos aplicativos max-widthe max-heightserá o único a ser usado.
hotshot309
2
@JackieChiles faz um ponto bom em outro segmento SO que se deve considerar (sobre estilos móveis aparecem em dispositivos maiores): stackoverflow.com/questions/8564752/...
hotshot309
5
Esta boa resposta não está completa: a orientação troca a largura e a altura do dispositivo no Android, mas não no iOS: consulte quirksmode.org/blog/archives/2010/04/the_orientation.html .
16

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 */
}
1ubos
fonte
Não responde à pergunta e é realmente uma péssima maneira de trabalhar em seus pontos de interrupção - Cuidado.
Quarenta
8

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.

Sarath
fonte
2
@media all e (max-width: 400px) {} Qual é a diferença
virsir
5

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).

Danny
fonte
5

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.

Lucky Chaturvedi
fonte
3

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.

Himanshu Garg
fonte
2

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.

SammieFox
fonte
Os itens simples "device-xxx" estão obsoletos, os itens "max-device-xxx" NÃO estão obsoletos.
Roger Krueger
1
@RogerKrueger Você tem certeza disso? Não vejo nada para indicar que as consultas de mídia max-device-xxx não foram preteridas.
Jonny Cook