Sobre este problema HTML
Os recursos de media min-device-width e max-device-width foram originalmente concebidos para consultar as dimensões físicas do ecrã de um dispositivo. No entanto, estes recursos foram descontinuados nas Media Queries Level 4 e Level 5 porque não são fiáveis em contextos de navegação modernos. O tamanho físico do ecrã é um indicador inadequado para o espaço de layout realmente disponível — não tem em conta a interface do navegador, modos de ecrã dividido, níveis de zoom, ou o facto de muitos dispositivos modernos relatarem valores de pixéis abstratos que não correspondem aos pixéis físicos do hardware de forma direta.
As alternativas baseadas no viewport — min-width e max-width — respondem ao layout viewport, que é o espaço real onde o seu conteúdo é renderizado. Isto torna-as muito mais úteis para design responsivo. Quando um utilizador faz zoom, o layout viewport diminui, e as consultas min-width/max-width respondem em conformidade. Com min-device-width, o zoom não tem qualquer efeito no resultado da consulta, o que pode levar a layouts que não se adaptam quando deviam.
Para além das preocupações práticas, usar recursos descontinuados significa que o seu CSS pode comportar-se de forma inconsistente entre navegadores no futuro, uma vez que o suporte pode ser completamente removido. Os validadores sinalizam isto para encorajar a migração para a abordagem moderna e em conformidade com as normas.
Como corrigir
A correção é uma substituição direta:
-
min-device-width→min-width -
max-device-width→max-width
Se a sua consulta original também incluía a palavra-chave screen apenas para emparelhar com o direcionamento device-width, pode removê-la com segurança — min-width e max-width aplicam-se a todos os tipos de media e o qualificador screen raramente é necessário em CSS moderno.
Se estava a usar min-device-width para detetar ecrãs de alta densidade ou Retina (um padrão comum em código mais antigo), a abordagem moderna correta é usar o recurso de media resolution em vez disso, como min-resolution: 2dppx.
Exemplos
Uso descontinuado (gera aviso)
<!doctype html>
<html lang="en">
<head>
<title>Deprecated media feature</title>
<style>
@media screen and (min-device-width: 768px) {
.sidebar { display: block; }
}
@media screen and (max-device-width: 480px) {
.sidebar { display: none; }
}
</style>
</head>
<body>
<aside class="sidebar">Sidebar content</aside>
</body>
</html>
Tanto min-device-width como max-device-width estão descontinuados e irão produzir avisos de validação.
Exemplo corrigido usando consultas baseadas no viewport
<!doctype html>
<html lang="en">
<head>
<title>Viewport-based media queries</title>
<style>
@media (min-width: 768px) {
.sidebar { display: block; }
}
@media (max-width: 480px) {
.sidebar { display: none; }
}
</style>
</head>
<body>
<aside class="sidebar">Sidebar content</aside>
</body>
</html>Substituindo device-width por resolution para densidade de pixéis
Código mais antigo por vezes usava min-device-width em combinação com -webkit-min-device-pixel-ratio para direcionar ecrãs de alta densidade. O equivalente moderno usa o recurso de media resolution:
<!doctype html>
<html lang="en">
<head>
<title>Resolution media query</title>
<style>
/* Abordagem descontinuada */
/*
@media screen and (min-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
.hero { background-image: url("hero@2x.jpg"); }
}
*/
/* Abordagem moderna */
@media (min-width: 768px) and (min-resolution: 2dppx) {
.hero { background-image: url("hero@2x.jpg"); }
}
</style>
</head>
<body>
<div class="hero">Hero section</div>
</body>
</html>
A consulta min-resolution: 2dppx substitui limpaente as consultas de ratio de pixéis com prefixo de fornecedor e funciona juntamente com a consulta viewport min-width padrão.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.