Sobre este problema HTML
As funcionalidades de media min-device-width e max-device-width foram originalmente concebidas para consultar as dimensões físicas do ecrã de um dispositivo. No entanto, estas funcionalidades foram descontinuadas nas Media Queries Level 4 e Level 5 porque são pouco fiáveis em contextos de navegação modernos. O tamanho físico do ecrã é um proxy inadequado para o espaço de layout realmente disponível — não tem em conta o chrome do browser, modos de ecrã dividido, níveis de zoom, ou o facto de que muitos dispositivos modernos reportam valores de píxeis abstratos que não correspondem aos píxeis físicos do hardware de forma direta.
As alternativas baseadas no viewport — min-width e max-width — respondem ao viewport de layout, 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 viewport de layout diminui, e as consultas min-width/max-width respondem em conformidade. Com min-device-width, o zoom não tem efeito no resultado da consulta, o que pode levar a layouts que não se adaptam quando deveriam.
Além das preocupações práticas, utilizar funcionalidades descontinuadas significa que o seu CSS pode comportar-se de forma inconsistente entre browsers no futuro, já que o suporte pode ser removido completamente. Os validadores sinalizam isto para encorajar a migração para a abordagem moderna e em conformidade com os standards.
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 no 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 a funcionalidade de media resolution em vez disso, tal como min-resolution: 2dppx.
Exemplos
Utilização descontinuada (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 descontinuadas 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>Substituir device-width por resolution para densidade de píxeis
Código mais antigo às vezes usava min-device-width em combinação com -webkit-min-device-pixel-ratio para visar ecrãs de alta densidade. O equivalente moderno usa a funcionalidade 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 de forma limpa as consultas de pixel ratio com prefixos de fornecedor e funciona junto com a consulta viewport padrão min-width.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.