Acerca de este problema HTML
Las características de media min-device-width y max-device-width fueron originalmente diseñadas para consultar las dimensiones físicas de la pantalla de un dispositivo. Sin embargo, estas características han sido obsoletas en Media Queries Nivel 4 y Nivel 5 porque no son fiables en contextos de navegación modernos. El tamaño físico de la pantalla es un indicador pobre del espacio de diseño real 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 de píxeles abstractos que no corresponden a los píxeles físicos del hardware de manera directa.
Las alternativas basadas en el viewport — min-width y max-width — responden al viewport de diseño, 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 viewport de diseño se encoge, y las consultas min-width/max-width responden en consecuencia. Con min-device-width, el zoom no tiene efecto en el resultado de la consulta, lo que puede llevar a diseños 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 manera inconsistente entre navegadores en el futuro, ya que el soporte podría ser eliminado completamente. Los validadores marcan esto para fomentar la migración al enfoque moderno y compatible 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 emparejar con el targeting de device-width, puedes eliminarla de forma segura — min-width y max-width se aplican en todos los tipos de media y el calificador screen rara vez 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 antiguo), el enfoque moderno correcto es usar la característica de media resolution en su lugar, como min-resolution: 2dppx.
Ejemplos
Uso obsoleto (activa 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 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 característica de media 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 limpiamente las consultas de relación de píxeles con prefijos de proveedor y funciona junto con la consulta estándar de viewport 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.