Desde que en su día aparecieron en CSS las unidades vw y vh, referidas al viewport de una página, las cosas parecían muy fáciles. Como 1vw equivale al 1% del ancho de viewport y 1vh es el 1% del alto del viewport, por ejemplo, colocar un elemento que ocupe todo el espacio disponible para la página es muy sencillo: basta con ponerle width: 100vw; height:100vh; y listo:
Estas unidades vienen con otras adicionales que las complementan:
vmin y vmax: que se corresponden con el valor menor y mayor de las unidades vw y vh.vi y vb: que el tamaño del viewport en los ejes inline y block, es decir, en la dirección en la que se colocan los elementos según tengan asignados esos modos de visualización. Por lo tanto, se corresponden generalmente con la dirección horizontal y con la vertical respectivamente. Así evitamos hablar de horizontal y vertical, ya que este puede cambiar, por ejemplo, si cambia la dirección o el sentido de la escritura (en idiomas como el hebreo o el chino).
El problema es que esto funciona muy bien en navegadores de escritorio, pero las cosas se complican mucho en las pantallas de los móviles.
Funcionamiento en navegadores móviles
El motivo es que en los navegadores móviles el ancho, y sobre todo el alto del viewport, varían dinámicamente en función de la aparición y desaparición de ciertos elementos del navegador, como la barra de direcciones, los botones de navegación, etc... que aparecen y desaparecen al hacer scroll en cierta dirección y otras circunstancias.
Por ejemplo, el siguiente vídeo es un navegador Safari en un iPhone con iOS. Como puedes observar, inicialmente tiene la barra de direcciones abajo, junto a unos botones/tabs de navegación. Ambos desaparecen cuando empezamos a hacer scroll, dejando mayor superficie de la página (mayor viewport) visible, y volviendo a mostrarlos si nos movemos hacia arriba de nuevo:
Lo mismo ocurre en Android, aunque en este caso depende también del navegador que utilices. Fíjate en cómo, con Chrome (a la izquierda) solamente hay una barra en la parte superior, que aparece y desaparece, mientras que en Edge (a la derecha) también hay una barra inferior con más cosas:
Cuando estas barras aparecen, tapan parte del viewport, que en realidad disminuye, pero nuestras unidades 100vw y 100vh permanecen constantes.
Para evitar este problema y poder adaptarnos en cada momento al verdadero tamaño del viewport, se han definido dos tamaños de viewport en el caso de los móviles: Viewport Grande y Viewport Pequeño (así, en plan original), que se corresponden a cuando no hay elementos del navegador visibles y cuando sí.
Lo interesante de esto es que, acompañando a estas definiciones se incluyen unas nuevas unidades que complementan a las que ya conocemos, y que llevan el prefijo lv (large viewport) y sv (small viewport) para distinguirlas:
lvw, lvh, lvmin, lvmax, lvi y lvb: que indican respectivamente el ancho, alto, mínimo, máximo y dimensiones del eje inline y del eje block en el "viewport grande", o sea, cuando no hay elementos del navegador interfiriendo.svw, svh, svmin, svmax, svi y svb: que ofrecen la misma información, pero para cuando los elementos del navegador móvil sí están visibles.
Los valores de estas unidades permanecen constantes en el navegador móvil, por lo que podemos usarlas para adaptarnos mejor a lo que queremos que se vea en la página según haya o no elementos visibles.
Unidades para dimensiones dinámicas del viewport
Pero ¿qué pasa si no queremos ceñirnos a uno u otro tamaño, sino al tamaño que haya en cada momento en función de si se ven o no los elementos?
La especificación nos ayuda con esto también gracias a las unidades dinámicas del viewport, que son equivalentes a las que acabamos de ver pero con el prefijo dv delante (de "dynamic viewport"): dvw, dvh, dvi, dvb, dvmin y dvmax.
En este caso los valores de estas unidades coinciden con las del área visible de la página. Es decir, si los elementos del navegador están ocultos coinciden con las dimensiones del viewport grande. Y si los elementos del navegador se muestran, entonces coinciden con los valores de las unidades del viewport pequeño.
Así, un mismo elemento adoptará tamaños diferentes según el viewport "estire o encoja" a medida que el usuario utiliza la página y por lo tanto se muestran u ocultan los elementos del navegador.
Algunos detalles a tener en cuenta con las unidades dinámicas
- Si el usuario pulsa en un control de entrada de datos que lanza el teclado del sistema, aunque éste tapa parte del viewport del navegador, no se tiene en cuenta para calcular las dimensiones. Esto es lógico, puesto la aparición del teclado es solamente circunstancial y además puede tener muchos tamaños diferentes o incluso ser flotante, con lo que taparía solamente algunas partes de la página. Al ser un elemento del sistema operativo, no se considera parte de los elementos del navegador.
- En los móviles, las barras de scroll no se ven por defecto y, cuando nos desplazamos se muestran de manera sutil, siendo muy delgadas y transparentes. Por eso no se tienen en cuenta para el cálculo de las dimensiones del viewport. Esto hay que saberlo, porque en los navegadores de escritorio, donde estas barras sí pueden tener unas dimensiones apreciables, si usamos el alto o ancho máximos indicados por esas unidades (
100dvw y 100 dwh) las barras de scroll pisarían a nuestros elementos. La propia especificación indica que esto debe ser así.
En la actualidad todos los navegadores del mercado (incluyendo Firefox y Safari) tienen soporte para estas unidades. Puedes ver la especificación completa en la página de la W3C.
¡Espero que te resulte útil!