Viewport

¿Qué es el viewport?

El viewport (ventana de visualización) es el área de una página web visible para el usuario. En un ordenador es el área de contenido de la ventana del navegador, en un móvil es la pantalla, y cambia cuando el usuario gira el dispositivo, redimensiona la ventana o hace zoom. Tu CSS se maqueta según el ancho del viewport, así que configurarlo bien es la base del diseño mobile-first y de los diseños adaptables.

Viewport de diseño y viewport visual

Los navegadores en realidad manejan dos viewports (según la página de MDN sobre la Visual Viewport API):

• Viewport de diseño (layout viewport): abarca todos los elementos de la página. No cambia cuando el usuario hace zoom con los dedos.
• Viewport visual (visual viewport): la parte de la página que se ve en pantalla en ese momento. Se reduce al acercar con el zoom, y el teclado en pantalla puede reducirlo sin tocar el viewport de diseño.

Por eso una barra con posición fija puede quedar oculta tras el teclado. Los scripts leen el viewport visual con window.visualViewport (width, height, scale, offsetTop), que MDN indica como ampliamente disponible desde agosto de 2021.

La etiqueta meta viewport

Los navegadores móviles suelen renderizar la página en un viewport virtual más ancho (MDN da el ejemplo de 980 px en una pantalla de 640 px) y la reducen, de modo que tus media queries ven un ancho incorrecto. La etiqueta meta viewport lo soluciona. El valor recomendado por MDN es:

<meta name="viewport" content="width=device-width">

Muchos sitios añaden también initial-scale=1; según MDN suele ser innecesario, pero no hace daño si quieres que la página empiece al 100 % de zoom. Las demás directivas:

Unidades de viewport

El viewport es la base de vw (1 % del ancho del viewport) y vh (1 % de su alto). MDN señala que, al cambiar el tamaño del viewport, cambia también el tamaño calculado de estas unidades. El ancho de la etiqueta meta es la base de vw.

Nunca bloquees el zoom

Con user-scalable=no las personas con baja visión no pueden ampliar la página. MDN advierte de que esto les impide leer y comprender el contenido, de que WCAG exige un escalado mínimo de 2x y de que lo recomendable es permitir 5x. Se aplican dos criterios de éxito de WCAG: 1.4.4 Cambio de tamaño del texto (el texto puede ampliarse hasta un 200 por ciento sin pérdida de contenido ni de funcionalidad) y 1.4.10 Reflujo (el contenido funciona con un ancho equivalente a 320 píxeles CSS sin desplazamiento en dos dimensiones). Además, los navegadores pueden ignorar estos ajustes: MDN indica que iOS 10 y posteriores ignoran por defecto user-scalable, minimum-scale y maximum-scale. Consulta WCAG y los diseños accesibles para ver el panorama completo.

Errores comunes

• Sin etiqueta meta viewport. La página se renderiza en un viewport virtual ancho y se ve diminuta en el móvil.
• Desactivar el zoom con user-scalable=no o un maximum-scale bajo. Excluye a usuarios con baja visión y no hace falta para evitar errores de diseño.
• Anchos fijos en píxeles. Los elementos más anchos que el viewport provocan desplazamiento horizontal y rompen el reflujo.
• Basar un diseño solo en vh. La altura visible cambia con las barras del navegador y el teclado. Prueba con el teclado abierto.
• Probar solo en escritorio. Redimensiona la ventana o usa el modo dispositivo del navegador y comprueba después en un móvil real.

Viewport y pruebas de rendimiento

El tamaño del viewport decide qué media queries se cumplen y qué imagen carga tu página, así que las ejecuciones de escritorio y móvil pueden cargar contenido distinto. La monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse en escritorio y móvil desde 25 regiones en la nube, para que compares ambas y sigas las Core Web Vitals a lo largo del tiempo. Más consejos en nuestra guía para mejorar la velocidad de tu web (en inglés). Referencias: MDN sobre la etiqueta meta viewport y la Visual Viewport API (en inglés).

Preguntas frecuentes: viewport

¿Qué hace width=device-width?

Fija el ancho del viewport de diseño al ancho de pantalla del dispositivo en píxeles CSS, de modo que la página no se renderice en un viewport virtual más ancho para luego reducirse.

¿Se permite user-scalable=no?

Técnicamente sí, pero bloquea el zoom con los dedos y perjudica a las personas con baja visión. Según MDN, WCAG exige al menos un escalado de 2x y recomienda permitir 5x. Deja el zoom activado.

¿Cuál es la diferencia entre el viewport de diseño y el visual?

El viewport de diseño es el área según la cual tu CSS maqueta la página y no cambia cuando el usuario hace zoom con los dedos. El viewport visual es la parte visible en ese momento y se reduce al hacer zoom o cuando aparece el teclado en pantalla.

¿Necesito initial-scale=1?

A menudo no. Según MDN suele ser innecesario, pero no hace daño si quieres que la página empiece al 100 % de zoom. Lo importante es evitar el desbordamiento horizontal.

¿Cómo pruebo distintos viewports?

Redimensiona la ventana del navegador, usa la barra de dispositivos de las herramientas para desarrolladores y confirma en un dispositivo real. Herramientas de laboratorio como Lighthouse también prueban móvil y escritorio por separado.