# New Viewport Units for Improved Mobile Design

URL: https://theosoti.com/short/css-new-viewport-unit/
Published: 2025-02-19
Author: Theo Soti
Tags: CSS, modern CSS, CSS layout, responsive design, frontend development, CSS tip


> Prevent 100vh layout shifts with new CSS viewport units (svh, lvh, dvh). Build smoother, more reliable mobile designs with dynamic toolbars.

## For years, `vh` and `vw` were our go-to viewport units.

But mobile browsers’ dynamic toolbars made `100vh` unreliable, causing layout shifts.

Now, CSS gives us better control with new viewport units.

- `svh` / `svw` → Small Viewport (when toolbars are fully visible)
- `lvh` / `lvw` → Large Viewport (when toolbars are fully collapsed)
- `dvh` / `dvw` → Dynamic Viewport (adjusts in real time as the UI changes)

With these units, layouts can adapt fluidly without sudden jumps when the browser UI changes.

Need a full-height section?
Use `100dvh`, and it’ll always fit.

Want a consistent design even when toolbars disappear?
`lvh` has you covered.

The browser support is already solid at ~95%, so it’s pretty safe to use.

The new viewport units are most useful on mobile screens with dynamic browser bars. Use `dvh` for live viewport behavior, and keep `svh` for stable areas like heroes where jumpy resizing would feel distracting.

The new viewport units solve real mobile issues caused by browser UI bars. Use `dvh` when you want live viewport behavior and prefer `svh` when you want a stable, non-jumpy section height.

Layout features like this provide real value when components move between narrow and wide containers. Testing nested contexts early prevents brittle breakpoint rules.

A practical way to adopt `svh` is to scope it to one high-impact component first. Then reuse that same pattern in similar contexts so behavior stays consistent and review time stays low.

For fullscreen sections on mobile, compare `svh`, `lvh`, and `dvh` side by side so you can choose the unit that matches the interaction you want.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!