Cuando 100vh Miente: Solucionando Problemas de Viewport en Móviles

Construyes una sección hero de altura completa. Se ve perfecta en Chrome DevTools. La abres en tu teléfono y el contenido inferior está cortado — el botón CTA en el que invertiste tiempo posicionándolo está oculto detrás de la barra de direcciones del navegador. ¿Te suena familiar?

Esto ya no es solo una peculiaridad de Safari. Es una consecuencia de cómo se definen fundamentalmente las unidades de viewport, y también afecta a Chrome, Firefox y Samsung Internet en móviles.

Por Qué 100vh Miente en Móviles

La causa raíz se reduce a dos conceptos diferentes de viewport:

• Layout viewport: lo que el navegador usa para calcular longitudes CSS, incluyendo vh
• Visual viewport: lo que el usuario realmente ve en pantalla

Los navegadores móviles intencionalmente mantienen el layout viewport fijo incluso cuando la barra de direcciones y la barra de navegación se retraen al hacer scroll. Esto significa que 100vh se calcula contra el estado de barra de herramientas expandida — el viewport grande — y ese valor es mayor que la pantalla visible cuando la página carga inicialmente.

Esto no es un bug. La especificación CSS define vh como equivalente a lvh (large viewport height). El navegador se está comportando correctamente. Tu diseño simplemente no lo tiene en cuenta.

Por eso la emulación móvil de DevTools se ve bien: no simula la UI dinámica del navegador. La barra de direcciones nunca se retrae en un simulador.

El Impacto en el Mundo Real

• Las secciones hero se desbordan por 56–80px en la carga inicial
• Los footers fijos quedan oscurecidos por la barra de navegación
• Los modales de pantalla completa recortan contenido en la parte inferior
• Los diseños saltan cuando las barras de herramientas se retraen a mitad del scroll (si estás usando dvh)

Soluciones Modernas: svh, dvh y lvh

CSS ahora te proporciona tres unidades explícitas de altura de viewport que corresponden a diferentes estados de las barras de herramientas:

Para la Mayoría de Secciones de Altura Completa: Usa svh

.hero {
  height: 100vh;     /* Fallback para navegadores antiguos */
  height: 100svh;    /* Se ajusta dentro de la pantalla visible en la carga */
}

100svh dimensiona el elemento al viewport más pequeño posible — lo que significa que se ajusta incluso cuando las barras de herramientas están completamente visibles. Sin desbordamiento, sin recortes.

Cuando Quieras Ajuste Dinámico: Usa dvh con Cuidado

.full-height {
  height: 100vh;     /* Fallback */
  height: 100dvh;    /* Se redimensiona conforme las barras se retraen */
}

Advertencia: dvh recalcula conforme la UI del navegador cambia durante el scroll. Esto puede causar cambios visibles de diseño y repintados. No es la opción predeterminada correcta para la mayoría de secciones hero o modales — úsala solo cuando explícitamente quieras que el elemento se redimensione con el estado de las barras de herramientas.

Compatibilidad con Navegadores

svh, dvh y lvh están soportadas en Chrome 108+, Safari 15.4+ y Firefox 101+. En conjunto, esto cubre más del 90% de usuarios globalmente. Para navegadores antiguos, el fallback de 100vh maneja el resto.

Casos Especiales que Vale la Pena Conocer

Inserciones de área segura: En pantallas edge-to-edge (notch/Dynamic Island de iPhone), combina unidades de viewport con env(safe-area-inset-bottom) para evitar que el contenido quede detrás de la UI del sistema:

.hero {
  height: 100svh;
  padding-bottom: env(safe-area-inset-bottom);
}

Teclado en pantalla: El teclado virtual afecta principalmente al visual viewport, y su interacción con el dimensionamiento del layout viewport puede variar entre navegadores y WebViews. Esto es independiente de las unidades de viewport impulsadas por barras de herramientas y puede requerir manejo con JavaScript o la API VirtualKeyboard como mejora progresiva.

WebViews y navegadores embebidos: Los navegadores dentro de aplicaciones (Instagram, LinkedIn) a menudo tienen comportamiento de viewport no estándar. Prueba en dispositivos reales, no solo en navegadores del sistema.

Conclusión

Deja de recurrir a 100vh como tu opción predeterminada para diseños móviles de altura completa. Usa 100svh para secciones estables que necesiten ajustarse a la pantalla visible en la carga. Reserva 100dvh para casos donde el redimensionamiento dinámico sea intencional. La nueva familia de unidades de viewport existe precisamente porque el comportamiento antiguo siempre fue un compromiso — ahora tienes las herramientas para ser explícito sobre lo que realmente quieres.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..