CSS Viewport Units Visualizer
Mobile browsers hide their address bar as you scroll, so the visible height keeps changing. The svh, lvh and dvh units give you a way to pick which height you mean. 100vh is stuck on the large one.
Height unit
Browser toolbars (simulated)
On a phone the address bar and bottom bar slide away as you scroll. Toggle them to see what each unit does.
Phone simulation: hero set to
Visible area right now
Hero height
Result
| Unit | Simulated height |
|---|---|
| vh | 640px |
| lvh | 640px |
| svh | 544px |
| dvh |
Your browser right now
| Unit | Measured height |
|---|---|
| 100vh | - |
| 100svh | - |
| 100lvh | - |
| 100dvh | - |
These are real values measured in your browser. On a desktop they are all the same because desktop browsers have no collapsing toolbars. Open this page on a phone and scroll to watch
dvh change while svh and lvh stay put. The phone above is a simulation, not a measurement.
Generated CSS
viewport-unit-variants Browser Support
Widely availableSince 202295% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
108+
101+
15.4+
108+