Viewport units lab
100dvh vs 100vh: Live CSS Viewport Units
See how tall 100vh, 100dvh, 100svh, and 100lvh are in pixels on this browser — and why mobile layouts jump when the browser chrome shows or hides.
Measuring units...
Why 100vh and 100dvh differ
On mobile, 100vh can ignore browser UI, while 100dvh tracks dynamic visible space. Use svh and lvh when you need fixed small/large viewport bounds.
Pair this with what is my viewport for live pixel readouts, or read the full guide: 100dvh vs 100vh explained.
vmin & vmax in practice
100vmin uses the smaller viewport dimension; 100vmax uses the larger one. They are useful for square-based UI patterns and responsive hero sizing.