La etiqueta meta viewport indica a los navegadores móviles qué ancho dar al área de diseño de la página y con cuánto zoom mostrarla al principio. Casi cualquier web debería usar exactamente esta línea en el <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Sin ella, los móviles suponen que la página es un diseño de escritorio, la maquetan con unos 980 px de ancho y la encogen para que quepa en la pantalla. Tu CSS responsive nunca llega a aplicarse.
Qué pasa sin la etiqueta meta viewport
Cuando aparecieron los primeros smartphones, casi todas las webs estaban hechas para pantallas de escritorio. Para poder mostrarlas, los navegadores móviles fingían tener un «viewport de diseño» de tamaño escritorio (980 px en Safari de iOS y Chrome para Android) y alejaban el zoom para que toda la página cupiera en la pantalla. Luego los usuarios ampliaban con los dedos para leer.
Ese comportamiento por defecto sigue aplicándose a cualquier página sin etiqueta viewport. En un móvil con pantalla de 390 px de ancho, una página así:
- comunica a CSS y JavaScript un viewport de unos 980 px
- nunca cumple media queries como
(max-width: 600px) - muestra el texto a un 40 % de su tamaño previsto, más o menos
Si tu web parece una página de escritorio diminuta en el móvil, revisa esta etiqueta lo primero. Es la causa más común de las que se explican en por qué una web se ve diferente en el móvil.
Qué significa cada valor
| Valor | Significado | Recomendado |
|---|---|---|
width=device-width |
Ajusta el viewport de diseño al ancho del dispositivo en píxeles CSS (por ejemplo, 390 en muchos iPhone) | Sí |
initial-scale=1 |
Empieza con un zoom del 100 %, con 1 píxel CSS por cada píxel independiente del dispositivo | Sí |
minimum-scale |
Zoom mínimo permitido | Rara vez hace falta |
maximum-scale |
Zoom máximo permitido | Evita valores por debajo de 5 |
user-scalable=no |
Desactiva el zoom con los dedos | Evitar |
width=1024 (número fijo) |
Fuerza un ancho de diseño fijo | Evitar en webs responsive |
viewport-fit=cover |
Extiende la página bajo el notch y las esquinas redondeadas | Solo con márgenes de safe area |
interactive-widget |
Controla cómo el teclado en pantalla redimensiona la página | Opcional |
Por qué no deberías desactivar el zoom
user-scalable=no y maximum-scale=1 impiden ampliar la página. Eso dificulta o imposibilita la lectura a las personas con baja visión y choca con el requisito de WCAG de que el texto se pueda ampliar hasta el 200 %. Lighthouse lo marca en su auditoría de accesibilidad.
Muchas veces se añade para evitar que Safari en iOS haga zoom en los campos de formulario. La solución correcta es un tamaño de letra de al menos 16 px en los campos:
input, select, textarea { font-size: 1rem; }En cualquier caso, el Safari moderno de iOS ignora user-scalable=no para el zoom con los dedos, así que la etiqueta perjudica sobre todo a otros navegadores.
viewport-fit=cover y zonas seguras
En móviles con notch, Dynamic Island o esquinas redondeadas, los navegadores mantienen por defecto la página dentro de un rectángulo seguro. viewport-fit=cover deja que la página ocupe toda la pantalla, algo que puedes querer en diseños a sangre. Entonces tendrás que apartar tú el contenido del notch y del indicador de inicio:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">.site-header {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }Pruébalo en horizontal, donde el notch queda a un lado.
interactive-widget y el teclado en pantalla
Cuando se abre el teclado, los navegadores o bien reducen solo el viewport visual (lo predeterminado en Chrome y Safari) o bien redimensionan todo el diseño. El valor nuevo interactive-widget te deja elegir:
resizes-visual: predeterminado; el diseño mantiene su tamaño y el teclado tapa una parteresizes-content: el viewport de diseño se reduce, así que los elementos con100dvhy los pies fijos suben por encima del tecladooverlays-content: no se redimensiona nada; gestiónalo tú con la API VirtualKeyboard
El soporte varía entre navegadores (los basados en Chromium lo admiten; comprueba el soporte actual antes de depender de él), así que prueba los formularios en móviles reales de todos modos.
Valores obsoletos que puedes quitar
shrink-to-fit=noera un apaño para iOS 9 y ya no tiene efecto.target-densitydpiera un valor antiguo de Android y se ignora.<meta name="HandheldFriendly">y<meta name="MobileOptimized">vienen de la época de los teléfonos con teclas.
Cómo comprobar tu etiqueta viewport
- Mira el código fuente de la página y busca
name="viewport". Debe haber exactamente una. - Haz una auditoría de Lighthouse en modo móvil (cómo hacerlo); avisa de etiquetas viewport ausentes o que bloquean el zoom.
- Abre la página en vista móvil. En el modo dispositivo de DevTools o en Mobile View Extension, que carga la página al tamaño de un móvil real, una página sin la etiqueta se ve alejada y con el texto diminuto.
Preguntas frecuentes
¿Cuál es la etiqueta meta viewport correcta?
<meta name="viewport" content="width=device-width, initial-scale=1">. Añade viewport-fit=cover solo si diseñas a pantalla completa y gestionas las zonas seguras.
¿Hace falta la etiqueta meta viewport para el diseño responsive?
Sí. Sin ella, los navegadores móviles maquetan las páginas con unos 980 px de ancho, así que las media queries móviles nunca se aplican.
¿Es malo usar user-scalable=no?
Sí, por accesibilidad. Impide que los usuarios amplíen el texto. Corrige el zoom no deseado en los campos de formulario con un tamaño de letra de 16 px en ellos.