Sobre este problema HTML
As funcionalidades de media device-width, device-height, e device-aspect-ratio (incluindo as suas variantes com prefixos min- e max-) referem-se às dimensões físicas de todo o ecrã, não ao espaço disponível onde o seu conteúdo é efetivamente renderizado. Esta distinção é importante porque o tamanho da viewport — a área que a sua página ocupa — pode diferir significativamente do tamanho total do ecrã do dispositivo. Por exemplo, uma janela do browser pode não estar maximizada, ou a interface do browser pode consumir espaço no ecrã. Usar consultas baseadas no dispositivo significa que os seus breakpoints responsivos podem não corresponder ao que os utilizadores efetivamente veem.
Estas funcionalidades também eram comummente usadas como uma forma de detetar dispositivos móveis, mas esta abordagem não é fiável. Um portátil com ecrã pequeno e um tablet grande podem ter larguras de dispositivo similares, tornando a deteção baseada no dispositivo uma heurística inadequada. O W3C depreciou estas funcionalidades e recomenda usar alternativas baseadas na viewport que refletem com mais precisão o contexto de renderização do seu documento.
Para além da conformidade com os padrões, usar funcionalidades de media depreciadas pode causar problemas com o suporte futuro dos browsers. Embora os browsers atuais ainda as reconheçam, não há garantia de que continuarão a fazê-lo. Substituí-las agora garante que as suas folhas de estilo permanecem funcionais e compatíveis com futuras versões.
Como corrigir
Substitua cada funcionalidade device-* depreciada pelo seu equivalente baseado na viewport:
| Funcionalidade depreciada | 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 |
min-device-aspect-ratio |
min-aspect-ratio |
max-device-aspect-ratio |
max-aspect-ratio |
A funcionalidade de media width descreve a largura da área de visualização direcionada do dispositivo de saída. Para media contínuos, esta é a largura da viewport incluindo o tamanho de uma barra de deslocamento renderizada (se existir). Este é quase sempre o valor que você realmente pretende ao construir layouts responsivos.
Exemplos
Incorreto: usar min-device-width depreciado
Isto desencadeia o erro de validação porque min-device-width está depreciado:
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="tablet.css">
Correto: usar min-width em vez disso
Substitua min-device-width por min-width para consultar a largura da viewport:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="tablet.css">
Incorreto: usar max-device-width para um breakpoint móvel
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css">
Correto: usar max-width
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css">
Incorreto: usar device-aspect-ratio
<link rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" href="widescreen.css">
Correto: usar aspect-ratio
<link rel="stylesheet" media="screen and (aspect-ratio: 16/9)" href="widescreen.css">Incorreto: combinar múltiplas funcionalidades depreciadas
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="tablet.css">Correto: usar equivalentes baseados na viewport
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="tablet.css">
As mesmas substituições aplicam-se quando estas funcionalidades depreciadas aparecem em regras CSS @media ou no atributo media em elementos <style> e <source>. Atualizá-las em toda a sua base de código garante um comportamento responsivo consistente e em conformidade com os padrões.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.