Maquetación Web Dinámica / Responsive Design profesional
dvh, svh, lvh: el viewport móvil de verdad
Durante años, height: 100vh en móvil fue una lotería: el hero se cortaba,
los botones quedaban bajo la barra del navegador, y media internet parcheaba
con JavaScript. La causa es una sola — la barra del navegador móvil aparece
y desaparece — y la solución moderna son tres unidades. Conociste dvh en el
módulo 3; hoy entiendes la familia completa y cuándo usar cada una.
El problema: un viewport con dos alturas
En el móvil, la interfaz del navegador (barra de dirección arriba, a veces barra de pestañas abajo) se OCULTA al scrollear hacia abajo y REAPARECE al subir. Resultado: el área visible tiene dos tamaños — con barra (pequeña) y sin barra (grande).
¿Y 100vh? Por decisión histórica, mide SIEMPRE el tamaño GRANDE (sin
barras). Por eso tu hero de 100vh con un botón abajo lo esconde tras la
barra al cargar la página: el navegador te dio la medida del salón sin
muebles, con los muebles puestos.
La familia de unidades
| Unidad | Mide | Úsala para |
|---|---|---|
svh (small) | el viewport CON barras visibles | lo que debe verse completo AL CARGAR: heros con CTA, pantallas de login |
lvh (large) | el viewport SIN barras (= el viejo vh) | fondos decorativos donde un recorte temporal no daña |
dvh (dynamic) | el tamaño REAL en cada instante | overlays y modales que siempre deben llenar la pantalla |
Bonus de familia: las tres existen también en ancho (svw/lvw/dvw,
raras — la barra es vertical) y con las lógicas dvi/dvb (inline/block)
para quien escribe CSS agnóstico de idioma. Con reconocerlas basta.
Tu hero de 100vh esconde el botón CTA bajo la barra de Safari al cargar. ¿La corrección con menos efectos secundarios?
Mini-reto
Si tienes un móvil a mano: entra a cualquier sitio con hero a pantalla
completa, carga la página y SIN scrollear mira si algo queda oculto tras la
barra inferior. Acabas de auditar el bug de 100vh en producción — está por
todas partes. En tu periódico, deja el hero (si le hiciste uno) en
min-height: 100svh.
Qué sigue
Última pieza teórica del módulo: el menú hamburguesa — primero el famoso "checkbox hack" en CSS puro (para entender el mecanismo) y luego la versión correcta y accesible con una pizca de JavaScript, tu primer contacto real con él.