🌐 Modern Viewport Units — svh, svw, lvh, lvw Explained

What Are Modern Viewport Units?

Traditional viewport units (vh, vw) have long struggled on mobile browsers due to dynamic UI bars (address bar, navigation bar) appearing and disappearing. Modern CSS introduces new units to fix these issues and give developersprecise, reliable viewport measurements.

>>“Modern viewport units finally give full control over mobile sizing — no more jumpy layouts.”

Note

✔ Supported in all major modern browsers
✔ Essential for mobile-first, fullscreen layouts
✔ Works together with dvh/dvw

📦 The 4 Modern Viewport Units

UnitMeaningRepresents
svhSmall Viewport HeightHeight when browser UI is fully visible (smallest possible)
svwSmall Viewport WidthWidth when UI reduces viewport (rare)
lvhLarge Viewport HeightHeight when browser UI is fully hidden (largest possible)
lvwLarge Viewport WidthWidest possible width

Note

🔥 svh = smallest height
🔥 lvh = largest height
🔥 dvh = dynamic, updating height

📌 Syntax

Syntax

height: 100svh;  /* Small viewport height */
height: 100lvh;  /* Large viewport height */
width: 100svw;   /* Small viewport width */
width: 100lvw;   /* Large viewport width */

🧠 Why Do We Need These Units?

Mobile browser UI bars appear/disappear when scrolling. This causes the traditional 100vh unit to:

  • Make content jump suddenly
  • Cut off bottom sections
  • Show blank space at the bottom
  • Create unpredictable layouts
>>“svh, lvh, and dvh offer predictable, reliable sizing across all states.”

📐 Understanding Each Unit

1️⃣ svh — Small Viewport Height

Represents the minimum height of the viewport (when the browser UI is fully visible).

svh Example

.safe-section {
  height: 100svh;
}

Useful when you want to avoid layout shifting on scroll.

2️⃣ lvh — Large Viewport Height

Represents the maximum height the viewport can reach (when browser UI collapses).

lvh Example

.fullscreen {
  height: 100lvh;
}

Perfect for true fullscreen on mobile apps.

3️⃣ svw — Small Viewport Width

Smallest width visible (rarely changes except with side UI panels).

svw Example

.sidebar {
  width: 20svw;
}

4️⃣ lvw — Large Viewport Width

Largest possible viewport width — useful for responsive hero designs.

lvw Example

.wide-banner {
  width: 100lvw;
}

🧪 Practical Examples

📱 1. Stable Mobile Hero Section

Stable Hero

.hero {
  height: 100svh; /* Prevent jumpiness */
  background: url(hero.jpg) center/cover;
}

🚀 2. True Fullscreen Mode

Full Screen

.hero-expanding {
  height: 100lvh; /* Tallest height available */
}

📏 3. Dynamic App Layout (best UX)

Dynamically Adjusting Layout

.page {
  min-height: 100dvh; /* Updates as UI changes */
}

Combine with svh & lvh for best control.

🎯 4. Responsive Typography Using vmin and vmax

Typography

.title {
  font-size: 5vmin;
}

Works well with modern viewport units to scale proportions.

🧬 How These Units Work Together

Scenariosvhlvhdvh
Browser UI visible✔ Accurate❌ Too large✔ Accurate
Browser UI hidden❌ Too small✔ Accurate✔ Accurate
UI changing during scroll❌ Static❌ Static✔ Updates live

Note

💡 Use dvh when you want dynamic behavior.
💡 Use svh or lvh when you want stability.

⚠️ Common Mistakes

  • ❌ Still using 100vh for mobile layouts
  • ❌ Assuming svh updates on scroll (it doesn’t)
  • ❌ Using lvh in components that shouldn’t jump on scroll
  • ❌ Not testing on different mobile browsers

Note

🎯 Best Practice:
Use dvh when you want dynamic behavior,
Use svh or lvh when you want stability.

🔥 Summary

Modern viewport units (svh, svw, lvh, lvw) finally solve the classic mobile viewport bug by providing stable and predictable sizing. Combined with dvh/dvw, they give designers full control over fullscreen layouts on mobile browsers.

>>“Modern viewport units make mobile web design truly reliable and predictable.”

Learn more →MDN Docs 📘