Acerca de este problema HTML
Las media features min-device-width y max-device-width fueron diseñadas originalmente para consultar las dimensiones físicas de la pantalla de un dispositivo. Sin embargo, estas características han sido declaradas obsoletas en Media Queries Level 4 y Level 5 porque no son confiables en los contextos de navegación modernos. El tamaño físico de la pantalla es un indicador poco fiable del espacio de layout realmente disponible — no tiene en cuenta el chrome del navegador, los modos de pantalla dividida, los niveles de zoom, o el hecho de que muchos dispositivos modernos reportan valores abstractos de píxeles que no corresponden a píxeles físicos del hardware de manera directa.
Las alternativas basadas en viewport — min-width y max-width — responden al layout viewport, que es el espacio real donde se renderiza tu contenido. Esto las hace mucho más útiles para el diseño responsivo. Cuando un usuario hace zoom, el layout viewport se reduce, y las consultas min-width/max-width responden en consecuencia. Con min-device-width, hacer zoom no tiene efecto en el resultado de la consulta, lo que puede llevar a layouts que no se adaptan cuando deberían.
Más allá de las preocupaciones prácticas, usar características obsoletas significa que tu CSS puede comportarse de forma inconsistente en los navegadores en el futuro, ya que el soporte podría eliminarse por completo. Los validadores marcan esto para fomentar la migración al enfoque moderno que cumple con los estándares.
Cómo solucionarlo
La solución es un reemplazo directo:
-
min-device-width→min-width -
max-device-width→max-width
Si tu consulta original también incluía la palabra clave screen únicamente para emparejarse con el targeting de device-width, puedes eliminarla de forma segura — min-width y max-width se aplican a todos los tipos de media y el calificador screen raramente es necesario en CSS moderno.
Si estabas usando min-device-width para detectar pantallas de alta densidad o Retina (un patrón común en código más antiguo), el enfoque moderno correcto es usar la media feature resolution en su lugar, como min-resolution: 2dppx.
Ejemplos
Uso obsoleto (genera advertencia)
<!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án obsoletas y producirán advertencias de validación.
Ejemplo corregido usando consultas basadas en 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>Reemplazando device-width con resolution para densidad de píxeles
El código más antiguo a veces usaba min-device-width en combinación con -webkit-min-device-pixel-ratio para dirigirse a pantallas de alta densidad. El equivalente moderno usa la media feature resolution:
<!doctype html>
<html lang="en">
<head>
<title>Resolution media query</title>
<style>
/* Enfoque obsoleto */
/*
@media screen and (min-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
.hero { background-image: url("hero@2x.jpg"); }
}
*/
/* Enfoque moderno */
@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>
La consulta min-resolution: 2dppx reemplaza de manera limpia las consultas de pixel ratio con prefijos de proveedores y funciona junto con la consulta de viewport estándar min-width.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.