Viewport Units Calculator
Convert between viewport units and pixels for real device sizes, and see why 100vh overflows on mobile and which of the dynamic viewport units fixes it.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Why 100vh is taller than the screen on a phone
On mobile browsers the address bar hides as you scroll and reappears as you scroll back, so the visible height changes during the session. The original vh unit resolves against the largest possible viewport, the one with the bar hidden, because a unit that changed value while scrolling would reflow the page continuously. The consequence is that an element set to 100vh is taller than the screen when the bar is showing, so its bottom is cut off exactly when a user first arrives.
The four units and which to use
svh is the small viewport, with the browser interface showing. lvh is the large viewport, with it hidden, and is what plain vh equals. dvh is dynamic and changes as the interface appears and disappears. For a full-height hero the answer is usually dvh, so it fills whatever is currently visible. For anything whose height must not change while scrolling, svh is safer, since dvh reflows the layout as the bar moves and that reflow is visible and unpleasant.
Viewport units are a poor fit for type
Font size in vw scales with the window with no floor and no ceiling, so text becomes unreadable on a narrow phone and absurd on a wide monitor. It also breaks browser zoom, because zooming does not change the viewport size, which means a user who needs larger text cannot get it. Fluid type needs clamp with rem bounds, so there is a minimum and a maximum and zoom still works.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why does 100vh overflow on mobile?
Because vh resolves against the largest viewport, with the browser interface hidden. When the address bar is showing, which it is when a user first arrives, the element is taller than the visible area and its bottom is cut off.
What is the difference between svh, lvh and dvh?
svh is the viewport with the browser interface showing, lvh with it hidden, and dvh changes dynamically between the two. Plain vh equals lvh.
Which unit should I use for a full-height section?
dvh for a hero that should fill whatever is currently visible. svh where the height must not change during scrolling, since dvh causes a visible reflow as the address bar moves.
Should I set font size in vw?
No. It has no minimum or maximum, so text becomes unreadable on narrow screens and absurd on wide ones, and it breaks browser zoom because zooming does not change the viewport size. Use clamp with rem bounds instead.
Do viewport units include the scrollbar?
vw includes the scrollbar width on desktop, which is why 100vw can cause horizontal overflow on a page that scrolls vertically. Using 100% for width avoids it, since percentage widths resolve against the containing block.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose a device and enter a value to convert between viewport units and pixels.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.