Mobile-First Viewport Physics: Mastering dvh, lvh, and svh

The "Jumping Header" Problem

In the early days of mobile web (iOS Safari), 100vh was a lie.

Browser vendors made a UX decision: "The URL bar disappears when you scroll down." This dynamic UI shift meant that the visible viewport height changed constantly.

• If 100vh was calculated with the URL bar, there would be a gap when it disappeared.
• If 100vh was calculated without it, content would be hidden behind it initially.

This created a jittery, unstable experience for "Hero" sections and full-screen Modals.

The Physics of Fluid Units

To solve this, the CSS Working Group introduced Dynamic Viewport Units. These are not just style rules; they are bindings to the browser's internal layout engine.

1. svh (Small Viewport Height)

• The Constant: This is the height of the screen when all browser UI elements are expanded (URL bar visible).
• Physics: Use this for "Safety Critical" UI. If you position a "Checkout" button using bottom: 0, use height: 100svh to ensure it is never covered by the URL bar.

2. lvh (Large Viewport Height)

• The Constant: The height when all browser UI elements are retracted.
• Physics: Use this for immersive backgrounds or parallax layers that can extend behind the UI chrome without affecting usability.

3. dvh (Dynamic Viewport Height)

• The Variable: This value interpolates in real-time as the user scrolls.
• Physics: dvh is reactive. It communicates to the Layout Engine that it must perform a reflow whenever the browser chrome state changes.

/* The "Perfect" Mobile Hero */
.hero-section {
  /* Fallback for legacy browsers */
  height: 100vh;
  
  /* Reactive height for modern mobile */
  height: 100dvh;
  
  /* Ensure content is safe */
  min-height: 100svh;
}

Architectural Implication

Why does an Architect care about CSS units? Because Layout Stability (CLS) is a Core Web Vital.

Using vh incorrectly on mobile triggers layout shifts that degrade the user's perception of quality (and your SEO score). By enforcing dvh/svh in your Design System's token layer, you structurally prevent an entire class of "janky" UI bugs across your enterprise application portfolio.