Warning Etiqueta meta viewport — faltante o incompleta
Por qué <meta name="viewport" content="width=device-width, initial-scale=1"> es necesaria para los layouts responsivos en móviles.
El validador advierte cuando la etiqueta meta viewport falta por completo (missing-viewport), o está presente pero sin width=device-width (weak-viewport).
Ejemplo
<meta name="viewport" content="width=device-width, initial-scale=1">Por qué importa
Los navegadores móviles renderizan las páginas en un "viewport de layout" virtual que por defecto mide unos 980px de ancho — el ancho de una página de escritorio típica de 2007 — y después escalan todo hacia abajo para que quepa en la pantalla, produciendo una página diminuta y alejada que exige hacer zoom con los dedos para leerla. Definir width=device-width le indica al navegador que use el ancho real de pantalla del dispositivo como ancho de layout en su lugar, para que el CSS responsivo (media queries, grids flexibles) se aplique de la forma en que se diseñó. Sin esta etiqueta, ninguno de los breakpoints responsivos se va a activar correctamente en un teléfono.
Frequently asked questions
¿Necesito initial-scale=1 además de width=device-width?
width=device-width es la parte que arregla el ancho del layout. initial-scale=1 además fija el nivel de zoom inicial en 1:1, que es lo que quieren la mayoría de los sitios — sin él, algunos navegadores eligen un zoom inicial distinto que igual puede verse mal en la primera carga.
¿Debería deshabilitar el zoom con los dedos con user-scalable=no?
Por lo general no — eso es un problema de accesibilidad para usuarios que dependen del zoom para leer texto pequeño. Rara vez vale la pena esa concesión fuera de interfaces muy específicas tipo aplicación.