Acerca de este problema HTML
Las características de media device-width, device-height, y device-aspect-ratio (incluyendo sus variantes con prefijos min- y max-) se refieren a las dimensiones físicas de toda la pantalla, no al espacio disponible donde tu contenido realmente se renderiza. Esta distinción importa porque el tamaño del viewport — el área que ocupa tu página — puede diferir significativamente del tamaño completo de la pantalla del dispositivo. Por ejemplo, una ventana del navegador podría no estar maximizada, o el chrome del navegador podría consumir espacio de pantalla. Usar consultas basadas en dispositivo significa que tus breakpoints responsivos podrían no coincidir con lo que los usuarios realmente ven.
Estas características también se usaban comúnmente como una forma indirecta de detectar dispositivos móviles, pero este enfoque es poco fiable. Un portátil con pantalla pequeña y una tablet grande pueden tener anchos de dispositivo similares, haciendo que la detección basada en dispositivo sea una heurística pobre. El W3C declaró obsoletas estas características y recomienda usar alternativas basadas en viewport que reflejen más precisamente el contexto de renderizado de tu documento.
Más allá del cumplimiento de estándares, usar características de media obsoletas puede causar problemas con el soporte futuro de navegadores. Aunque los navegadores actuales aún las reconocen, no hay garantía de que continúen haciéndolo. Reemplazarlas ahora asegura que tus hojas de estilo permanezcan funcionales y compatibles hacia adelante.
Cómo solucionarlo
Reemplaza cada característica de media device-* obsoleta con su equivalente basado en viewport:
| Característica obsoleta | Reemplazo |
|---|---|
device-width |
width |
min-device-width |
min-width |
max-device-width |
max-width |
device-height |
height |
min-device-height |
min-height |
max-device-height |
max-height |
device-aspect-ratio |
aspect-ratio |
min-device-aspect-ratio |
min-aspect-ratio |
max-device-aspect-ratio |
max-aspect-ratio |
La característica de media width describe el ancho del área de visualización objetivo del dispositivo de salida. Para medios continuos, este es el ancho del viewport incluyendo el tamaño de una barra de desplazamiento renderizada (si existe). Este es casi siempre el valor que realmente quieres al construir layouts responsivos.
Ejemplos
Incorrecto: usando min-device-width obsoleto
Esto desencadena el error de validación porque min-device-width está obsoleto:
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="tablet.css">
Correcto: usando min-width en su lugar
Reemplaza min-device-width con min-width para consultar el ancho del viewport:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="tablet.css">
Incorrecto: usando max-device-width para un breakpoint móvil
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css">
Correcto: usando max-width
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css">
Incorrecto: usando device-aspect-ratio
<link rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" href="widescreen.css">
Correcto: usando aspect-ratio
<link rel="stylesheet" media="screen and (aspect-ratio: 16/9)" href="widescreen.css">Incorrecto: combinando múltiples características obsoletas
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="tablet.css">Correcto: usando equivalentes basados en viewport
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="tablet.css">
Los mismos reemplazos aplican cuando estas características obsoletas aparecen en reglas CSS @media o en el atributo media en elementos <style> y <source>. Actualizarlas en toda tu base de código asegura un comportamiento responsivo consistente y compatible con estándares.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.