Un héroe con un tamaño de 100vh se ve bien en cada captura de pantalla del escritorio y mal en cada navegador de bolsillo, porque vh siempre mide la ventana gráfica más grande, no la que estás mirando. La familia de tres prefijos cierra esa brecha y el parche es impresionantemente aburrido de leer.

/* small: never taller than what is visible, bars included */
.hero { min-height: 100svh; }
/* dynamic: tracks the bars as they hide and return */
.photo-fill { height: 100dvh; }

El caso del dinero: barras de navegador móviles

  • En dispositivos móviles, 100vh mide la ventana gráfica más grande posible, por lo que un héroe de altura completa se sienta parcialmente detrás de la barra inferior hasta que el usuario comienza a desplazarse, una primera impresión realmente horrible.
  • 100svh usa la ventana gráfica pequeña, el estado donde ambas barras son visibles; cualquier tamaño que tenga es completamente visible durante la carga, no es necesario desplazarse, no es ninguna sorpresa.
  • 100dvh sigue los bares en directo. Es honesto, pero cada cambio provoca un reflujo a mitad del desplazamiento, así que manténgalo alejado de las pilas de altura crítica y prefiéralo para rellenos de fotografías que deberían cubrir todo lo visible.

El escritorio no ve nada

En los navegadores de escritorio, las tres variantes generalmente calculan el mismo número, por lo que una revisión de una computadora portátil no detectará el defecto; sólo se muestra en dispositivos con barras dinámicas, que es exactamente donde ocurren la mayoría de las primeras visitas. El modo de diseño responsivo con una ventana táctil cubre el cheque en segundos.

El aburrido resumen: las secciones completas obtienen 100svh, las superposiciones inmersivas obtienen 100dvh y 100vh se queda como una ocurrencia tardía solo para escritorio. Un truco increíble, no porque sea inteligente, sino porque tres letras reemplazan una pila de barras de desplazamiento de una vez por todas.