Validación HTML: CSS: Característica de media obsoleta "max-device-width". Para obtener orientación, consulta la sección Deprecated Media Features en la especificación actual de Media Queries.

Acerca de este problema HTML

Las características de media device-width y device-height (incluyendo sus versiones con prefijos min- y max-) fueron originalmente diseñadas para consultar las dimensiones físicas de la pantalla de un dispositivo. En la práctica, esto causó problemas significativos. En pantallas de alta densidad de píxeles (Retina), max-device-width podía reportar valores inesperados dependiendo de la relación de píxeles del dispositivo. Cuando los usuarios redimensionaban la ventana del navegador, estas características no respondían porque el tamaño físico de la pantalla nunca cambiaba. Y con el zoom del navegador, el diseño podía romperse porque la consulta aún hacía referencia a las dimensiones fijas del dispositivo en lugar del espacio disponible real.

La especificación Media Queries Level 4 declaró formalmente obsoletas estas características. Los navegadores modernos aún las soportan por compatibilidad hacia atrás, pero no deberían usarse en código nuevo. El validador W3C levanta esta advertencia para fomentar la migración al estándar actual.

Los equivalentes basados en viewport — width, min-width y max-width — responden al viewport de diseño del navegador. Esto significa que se adaptan correctamente cuando el usuario redimensiona la ventana, hace zoom en la página, o ve la página en modo pantalla dividida. También se comportan de manera consistente en todos los dispositivos independientemente de la densidad de píxeles.

Si tu código existente usa max-device-width o min-device-width, la solución es sencilla: elimina la palabra device del nombre de la característica. Por ejemplo, max-device-width: 768px se convierte en max-width: 768px. Si dependías de las dimensiones del dispositivo para detectar pantallas de alta densidad de píxeles, usa la característica de media resolution en su lugar (ej., min-resolution: 2dppx), que es el reemplazo compatible con estándares para características con prefijos de proveedores como -webkit-min-device-pixel-ratio.

Al elegir valores de breakpoint, prefiere breakpoints impulsados por el contenido — valores donde tu diseño realmente necesita adaptarse — en lugar de dirigirse a anchos específicos de dispositivos. Esto produce diseños más resistentes que funcionan bien en cualquier tamaño de pantalla.

Ejemplos

Uso obsoleto que activa la advertencia

La característica de media max-device-width en el bloque <style> activa la advertencia del validador:

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated Media Feature</title>
  <style>
    /* Obsoleto: consulta la pantalla física del dispositivo */
    @media only screen and (max-device-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a deprecated media feature.</p>
</body>
</html>

La misma advertencia aparece si la característica obsoleta se usa en el atributo media de un elemento <link>:

<link rel="stylesheet" href="mobile.css" media="(max-device-width: 480px)">

Ejemplo corregido usando consultas basadas en viewport

Reemplaza max-device-width con max-width para consultar el viewport en su lugar:

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-Based Media Query</title>
  <style>
    /* Correcto: responde al ancho del viewport */
    @media (max-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a modern media feature.</p>
</body>
</html>

Y para el elemento <link>:

<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">

Reemplazando consultas de relación de píxeles del dispositivo

Si estabas usando características device-width junto con -webkit-min-device-pixel-ratio para dirigirte a pantallas de alta densidad de píxeles, cambia a la característica estándar resolution:

<style>
  /* Enfoque obsoleto */
  @media (-webkit-min-device-pixel-ratio: 2) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }

  /* Reemplazo compatible con estándares */
  @media (min-resolution: 2dppx) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }
</style>

Referencia rápida de reemplazos

Característica obsoleta	Reemplazo moderno
`max-device-width`	`max-width`
`min-device-width`	`min-width`
`max-device-height`	`max-height`
`min-device-height`	`min-height`
`-webkit-min-device-pixel-ratio: 2`	`min-resolution: 2dppx`