100vh en móviles: cuándo usar svh, lvh y dvh

Mientras adaptaba CLABA a móviles me encontré con un clásico: un bloque de 100vh que parecía correcto en escritorio y quedaba parcialmente escondido tras la interfaz del navegador en el teléfono.

El problema no es que vh sea inútil. Es que en móvil hay varias maneras de entender «el alto de la ventana», dependiendo de si las barras del navegador están desplegadas.

Las unidades actuales

• svh: la altura pequeña, pensada para caber con las barras visibles.
• lvh: la altura grande, con las barras retraídas.
• dvh: la altura dinámica, que sigue esos cambios.

vh corresponde a la variante grande en las implementaciones actuales. Un bloque puede, por tanto, ser más alto que el área visible en ese instante.

Una solución CSS con respaldo

.pantalla {
  min-height: 100vh;
  min-height: 100svh;
}

Usaría svh para una portada que deba caber sin saltos cuando aparece la barra. Para un panel que deba adaptarse continuamente:

.panel {
  min-height: 100vh;
  min-height: 100dvh;
}

min-height deja crecer el contenido. Un height fijo puede recortarlo al aumentar el tamaño de letra o traducir los textos. La unidad dinámica puede provocar cambios de tamaño mientras navegas; no es automáticamente mejor para todos los componentes.

Lo que no arregla el problema por sí solo

Poner height: 100% en html y body no resuelve todos los casos. Medir window.innerHeight una sola vez tampoco contempla rotación, teclado y cambios de interfaz. Probaría primero CSS y después, si un componente lo exige, una medición de su viewport real.

Referencia: unidades de longitud y viewport en CSS.

Capturas del artículo original