Acerca de este problema HTML
Las características de medios device-width y device-height (junto con sus variantes con prefijos min- y max-) originalmente se referían a las dimensiones físicas de toda la pantalla del dispositivo, independientemente de cuánto espacio estuviera realmente disponible para el documento. En la práctica, esta distinción causaba confusión y comportamiento inconsistente entre navegadores. En la mayoría de dispositivos y navegadores modernos, device-width y width devuelven el mismo valor de todos modos, haciendo que las variantes device-* sean redundantes.
Las características de medios device-* se usaban frecuentemente como sustituto para detectar dispositivos móviles, pero esto nunca fue un enfoque confiable. Una ventana de navegador estrecha en un monitor de escritorio no activaría una consulta max-device-width aunque el espacio de diseño disponible fuera pequeño. Por el contrario, los teléfonos y tabletas modernos con pantallas de alta resolución pueden reportar anchos de dispositivo grandes que no reflejan el tamaño real del viewport CSS. Las alternativas basadas en viewport (width, height, aspect-ratio) representan con mayor precisión el espacio disponible para renderizar tu contenido.
Usar características de medios obsoletas causa advertencias de validación W3C y puede eventualmente perder soporte del navegador por completo. Reemplazarlas asegura que tus hojas de estilo sean a prueba de futuro, cumplan con los estándares y se comporten de forma consistente en todos los dispositivos y tamaños de ventana.
Cómo solucionarlo
Reemplaza cualquier característica de medios device-width, device-height, o device-aspect-ratio (incluyendo versiones con prefijos min- y max-) con el equivalente basado en viewport correspondiente:
| 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 |
La característica de medios width describe el ancho del viewport (el área de visualización objetivo del dispositivo de salida), incluyendo el tamaño de una barra de desplazamiento renderizada si existe alguna. Este es el valor que casi siempre quieres cuando escribes estilos responsivos.
Ejemplos
Incorrecto: usando max-device-width obsoleto
Esto desencadena el error de validación porque max-device-width está obsoleto:
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="mobile.css">
Correcto: usando max-width en su lugar
Reemplaza max-device-width con max-width para consultar el ancho del viewport:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="mobile.css">
Incorrecto: usando min-device-width obsoleto en un rango
<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">
Incorrecto: usando device-aspect-ratio obsoleto
<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">
Aplicando la misma corrección en reglas CSS @media
La misma obsolescencia se aplica a las reglas @media dentro de las hojas de estilo. Aunque el validador W3C específicamente marca el atributo media en elementos <link>, también deberías actualizar tu CSS:
/* Obsoleto */
@media only screen and (max-device-width: 768px) {
.sidebar { display: none; }
}
/* Correcto */
@media only screen and (max-width: 768px) {
.sidebar { display: none; }
}
Si tu sitio depende de una etiqueta <meta name="viewport"> (como la mayoría de sitios responsivos), el ancho del viewport ya coincide con el ancho de píxeles CSS del dispositivo, así que cambiar de device-width a width producirá resultados idénticos en prácticamente todos los casos.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.