Sobre este problema HTML
As funcionalidades de media device-width e device-height (juntamente com as suas variantes com prefixos min- e max-) originalmente referiam-se às dimensões físicas de todo o ecrã do dispositivo, independentemente de quanto espaço estava realmente disponível para o documento. Na prática, esta distinção causou confusão e comportamento inconsistente entre navegadores. Na maioria dos dispositivos e navegadores modernos, device-width e width retornam o mesmo valor de qualquer forma, tornando as variantes device-* redundantes.
As funcionalidades de media device-* eram frequentemente usadas como proxy para detetar dispositivos móveis, mas esta nunca foi uma abordagem fiável. Uma janela estreita do navegador num monitor de desktop não acionaria uma query max-device-width mesmo que o espaço de layout disponível fosse pequeno. Por outro lado, telemóveis e tablets modernos com ecrãs de alta resolução podem reportar larguras de dispositivo grandes que não refletem o tamanho real do viewport CSS. As alternativas baseadas no viewport (width, height, aspect-ratio) representam com mais precisão o espaço disponível para renderizar o seu conteúdo.
Usar funcionalidades de media obsoletas causa avisos de validação W3C e pode eventualmente perder suporte do navegador completamente. Substituí-las garante que as suas folhas de estilo são à prova de futuro, conformes aos padrões, e comportam-se consistentemente em todos os dispositivos e tamanhos de janela.
Como corrigir
Substitua qualquer funcionalidade de media device-width, device-height, ou device-aspect-ratio (incluindo versões com prefixos min- e max-) pelo equivalente baseado no viewport correspondente:
| Funcionalidade obsoleta | Substituição |
|---|---|
device-width |
width |
min-device-width |
min-width |
max-device-width |
max-width |
device-height |
height |
min-device-height |
min-height |
max-device-height |
max-height |
device-aspect-ratio |
aspect-ratio |
A funcionalidade de media width descreve a largura do viewport (a área de exibição direcionada do dispositivo de saída), incluindo o tamanho de uma barra de deslocamento renderizada, se existir. Este é o valor que você quase sempre deseja ao escrever estilos responsivos.
Exemplos
Incorreto: usando max-device-width obsoleto
Isto aciona o erro de validação porque max-device-width está obsoleto:
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="mobile.css">
Correto: usando max-width em vez disso
Substitua max-device-width por max-width para consultar a largura do viewport:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="mobile.css">
Incorreto: usando min-device-width obsoleto num intervalo
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="tablet.css">Correto: usando equivalentes baseados no viewport
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="tablet.css">
Incorreto: usando device-aspect-ratio obsoleto
<link rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" href="widescreen.css">
Correto: usando aspect-ratio
<link rel="stylesheet" media="screen and (aspect-ratio: 16/9)" href="widescreen.css">
Aplicando a mesma correção em regras CSS @media
A mesma descontinuação aplica-se às regras @media dentro das folhas de estilo. Embora o validador W3C sinalize especificamente o atributo media em elementos <link>, você também deve atualizar o seu CSS:
/* Obsoleto */
@media only screen and (max-device-width: 768px) {
.sidebar { display: none; }
}
/* Correto */
@media only screen and (max-width: 768px) {
.sidebar { display: none; }
}
Se o seu site depende de uma tag <meta name="viewport"> (como a maioria dos sites responsivos faz), a largura do viewport já corresponde à largura de pixel CSS do dispositivo, então mudar de device-width para width produzirá resultados idênticos em praticamente todos os casos.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.