En el mundo del diseño web moderno, la unidad css dvh se ha convertido en la solución más efectiva para resolver los problemas históricos de 100vh en móvil.

Durante años, los desarrolladores se encontraron con diseños rotos debido a las barras dinámicas del navegador, hoy, gracias a dvh, lvh y svh, es posible construir interfaces estables, fiables y listas para producción.

El diseño en móviles se está convirtiendo en un aspecto esencial y, hoy en día, resulta básico contar con una web optimizada a nivel visual y funcional en smartphones. Esto exige una buena estrategia de diseño responsivo, ya que la experiencia de usuario móvil es la que define gran parte del tráfico actual. Antiguamente, la mayoría de sitios web no estaban pensados para móviles ya que solían ser simples adaptaciones de la versión de escritorio. Hoy, con las nuevas unidades de viewport en CSS, el enfoque es distinto y mucho más avanzado.

Índice de contenidos

• Qué es dvh en CSS y diferencias con vh, svh y lvh
• Por qué 100vh se rompe en móvil
• Cuándo usar 100dvh, 100lvh y 100svh
• Casos prácticos con 100dvh
• Compatibilidad actual y fallbacks
• Uso de dvh, lvh y svh en Tailwind CSS
• Checklist de implementación y pruebas
• Preguntas frecuentes sobre dvh
• Conclusión

Qué es dvh en CSS y diferencias con vh, svh y lvh

El valor dvh significa Dynamic Viewport Height. Representa la altura visible del navegador en cada instante, adaptándose cuando aparecen o desaparecen elementos de la interfaz como la barra superior o inferior. Es la alternativa moderna a 100vh, que históricamente fallaba en dispositivos móviles [MDN].

• vh: Altura del viewport, suele coincidir con lvh en navegadores modernos.
• svh: Small viewport height, incluye las barras visibles.
• lvh: Large viewport height, mide cuando las barras están ocultas.
• dvh: Dynamic viewport height, se ajusta en tiempo real según cambia la UI.

Por qué 100vh se rompe en móvil

Durante años, 100vh era la herramienta preferida para crear secciones de pantalla completa. El problema es que en dispositivos móviles, las barras de navegador cambian de tamaño al hacer scroll, lo que provoca saltos visuales, contenido oculto o scroll innecesario. Este comportamiento obligaba a usar hacks de JavaScript para calcular la altura correcta [StackOverflow].

Cuándo usar 100dvh, 100lvh y 100svh

La elección depende del caso de uso:

Casos prácticos con 100dvh

Un ejemplo típico es un hero de página de inicio:

.hero {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@supports not (height: 100dvh) {
  .hero {
    height: 100vh;
    min-height: -webkit-fill-available; /* fallback iOS */
  }
}

Este patrón garantiza estabilidad incluso en navegadores sin soporte.

Compatibilidad actual y fallbacks

Según Can I Use, dvh, lvh y svh ya cuentan con soporte en la mayoría de navegadores modernos, tanto en Android como en iOS. Para versiones antiguas:

• Usar @supports para detectar soporte.
• Añadir min-height: -webkit-fill-available como fallback en Safari antiguo.
• Evitar soluciones basadas en JavaScript salvo casos muy específicos.

Uso de dvh, lvh y svh en Tailwind CSS

Las versiones recientes de Tailwind ya permiten unidades modernas. Ejemplo:

  
Sección full height con dvh

Checklist de implementación y pruebas

• Probar en iOS Safari, Chrome Android y navegadores in-app.
• Testear con la barra de direcciones visible y oculta.
• Revisar comportamiento al girar el dispositivo.
• Comprobar con teclado en pantalla (inputs y formularios).

Preguntas frecuentes sobre dvh

¿Es lo mismo vh que lvh?

En la mayoría de navegadores modernos, vh se equipara a lvh. Sin embargo, usar lvh da mayor precisión semántica.

¿100dvh puede generar saltos de layout?

Sí, si la UI cambia (por ejemplo, aparece un teclado virtual), dvh se ajusta en tiempo real. En esos casos conviene usar lvh.

¿Qué fallback usar si dvh no está soportado?

Combinar @supports con 100vh y -webkit-fill-available asegura máxima compatibilidad.

¿Cuál es la diferencia entre svh y lvh?

svh representa la altura del viewport cuando las barras del navegador están visibles, mientras que lvh refleja la altura máxima disponible cuando dichas barras se ocultan tras hacer scroll.

¿Se pueden usar dvh, lvh y svh en frameworks como Tailwind o Bootstrap?

Sí. En Tailwind ya es posible escribir clases con estas unidades mediante sintaxis arbitraria. En otros frameworks como Bootstrap pueden aplicarse directamente en el CSS personalizado sin problemas de compatibilidad.

Conclusión

La llegada de dvh, junto con lvh y svh, marca un antes y un después en el diseño web móvil. Estos valores ponen fin a los problemas clásicos de 100vh y permiten trabajar con secciones a pantalla completa sin recurrir a hacks. Más allá de lo técnico, representan un paso hacia una web más estable, usable y preparada para el futuro. Adoptarlos no solo mejora la experiencia del usuario, también refuerza la estrategia de diseño y posicionamiento de cualquier proyecto digital que aspire a ser competitivo en un mundo dominado por el móvil.