Las unidades de viewport grandes, pequeñas y dinámicas

Nuevas unidades de CSS que tienen en cuenta los viewports para dispositivos móviles con barras de herramientas dinámicas

Bramus

El viewport y sus unidades

Para dimensionar algo tan alto como el viewport, puedes usar las unidades vw y vh.

  • vw = 1% del ancho del tamaño del viewport.
  • vh = 1% de la altura del tamaño del viewport.

Otorga a un elemento un ancho de 100vw y una altura de 100vh, y cubrirá el viewport por completo.

Un elemento azul claro configurado para ser de 100 vw por 100 vh, que abarca todo el viewport El viewport se indica con un borde de línea punteada azul.
Es un elemento azul claro configurado en 100 vw por 100 vh, que cubre todo el viewport.
El viewport en sí se indica con un borde azul punteado.

Las unidades vw y vh se ubicaron en navegadores con estas unidades adicionales.

  • vi = 1% del tamaño del eje de intercalado del viewport.
  • vb = 1% del tamaño del eje de bloque del viewport.
  • vmin = el menor de vw o vh
  • vmax = el mayor de vw o vh

Estas unidades son compatibles con los navegadores.

Navegadores compatibles

  • 20
  • 12
  • 19
  • 6

La necesidad de nuevas unidades de viewport

Si bien las unidades existentes funcionan bien en las computadoras de escritorio, en los dispositivos móviles la situación es diferente. Allí, el tamaño del viewport se ve afectado por la presencia o ausencia de barras de herramientas dinámicas. Son interfaces de usuario, como barras de direcciones y barras de pestañas.

Aunque el tamaño del viewport puede cambiar, los tamaños vw y vh no lo hacen. Como resultado, los elementos cuyo tamaño será de 100vh alto quedarán fuera del viewport.

100 VH en dispositivos móviles es demasiado alto durante la carga.
La carga de 100 vh en dispositivos móviles es demasiado alta.

Cuando se desplace hacia abajo, estas barras de herramientas dinámicas se retraerán. En este estado, los elementos cuyo tamaño será de 100vh alto cubrirán todo el viewport.

100 vh en dispositivos móviles es "correcto" cuando se retraen las interfaces de usuario usuario-agente.
100 vh en dispositivos móviles es "correcto" cuando se retractan las interfaces de usuario usuario-agente.

Para solucionar este problema, se especificaron los distintos estados del viewport en el grupo de trabajo de CSS.

  • Ventana gráfica grande: Es el tamaño de la vista del puerto, en la suposición de que hay interfaces de UA que se expanden y retraen de forma dinámica para poder retractarse.
  • Ventana de visualización pequeña: Es el tamaño de la viewport, suponiendo que se van a expandir las interfaces de UA que se expanden y se retractan de forma dinámica.
Visualizaciones de los viewports grandes y pequeños.
Visualizaciones de las viewports grandes y pequeñas.

Los nuevos viewports también tienen unidades asignadas:

  • Las unidades que representan el viewport grande tienen el prefijo lv. Las unidades son lvw, lvh, lvi, lvb, lvmin y lvmax.
  • Las unidades que representan el viewport pequeño tienen el prefijo sv. Las unidades son svw, svh, svi, svb, svmin y svmax.

Los tamaños de estas unidades de porcentaje de viewport son fijos (y, por lo tanto, son estables), a menos que se cambie el tamaño del viewport.

Dos visualizaciones de un navegador móvil colocadas una al lado de la otra. Uno tiene un elemento de tamaño 100 svh y el otro 100 lvh.
Dos visualizaciones del navegador para dispositivos móviles colocadas una al lado de la otra.
Una tiene un elemento de 100 svh y la otra 100 lvh.

Además de las viewports grandes y pequeñas, también hay una viewport dinámica que tiene en cuenta de forma dinámica la IU de UA:

  • Cuando se expanden las barras de herramientas dinámicas, el viewport dinámico es igual al tamaño del pequeño.
  • Cuando se retraen las barras de herramientas dinámicas, el viewport dinámico es igual al tamaño del viewport grande.

Las unidades acompañadas tienen el prefijo dv: dvw, dvh, dvi, dvb, dvmin y dvmax. Sus tamaños se restringen entre sus equivalentes lv* y sv*.

100dvh se adapta al tamaño de viewport grande o pequeño.
100dvh se adapta al tamaño de viewport grande o pequeño.

Estas unidades se envían en Chrome 108 y se unen a Safari y Firefox, que ya tienen compatibilidad.

Navegadores compatibles

  • 108
  • 108
  • 101
  • 15.4

Advertencias

Ten en cuenta las siguientes advertencias sobre las unidades de viewport:

  • Ninguna de las unidades de viewport tiene en cuenta el tamaño de las barras de desplazamiento. En los sistemas que tienen habilitadas las barras de desplazamiento clásicas, un elemento con el tamaño 100vw, por lo tanto, será demasiado ancho. Esto es por especificación.

  • Los valores del viewport dinámico no se actualizan a 60 FPS. En todos los navegadores, la actualización se limita a medida que la IU de UA se expande o se retracta. Algunos navegadores incluso impiden la actualización por completo según el gesto utilizado (un desplazamiento lento en comparación con un deslizamiento).

  • El teclado en pantalla (también conocido como teclado virtual) no se considera parte de la IU de UA. Por lo tanto, no afecta el tamaño de las unidades de viewport. En Chrome, puedes habilitar un comportamiento en el que la presencia del teclado virtual afecte las unidades del viewport.

Recursos adicionales

Para obtener más información sobre viewports y estas unidades, consulta este episodio de HTTP 203. En él, Bramus le informa a Jake todo sobre los distintos viewports y explica cómo se determinan exactamente los tamaños de estas unidades.

Material de lectura adicional: