Viewport unit calculator
Semantics and pixel maths for vw, vh, vmin, vmax, vb, vi, svh, lvh, dvh, svw, lvw and dvw: enter a viewport size to get real pixel values, plus the mobile 100vh problem and how to choose between svh, lvh and dvh.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Viewport size
vw and vh are based on the large viewport (the size with browser UI retracted), which is why 100vh is taller than the visible area on mobile. svh uses the smallest height, dvh the currently visible one, and lvh equals vh.
Live preview
The preview draws the three heights to scale: the dashed line is the current visible height (dvh) and the shaded block is the smallest height with the UI expanded (svh).
Result
| Unit | 1 unit | 100 units | Your value |
|---|---|---|---|
| vw | 3.9px | 390px | 195px |
| vh | 8.44px | 844px | 422px |
| vmin | 3.9px | 390px | 195px |
| vmax | 8.44px | 844px | 422px |
| vi | 3.9px | 390px | 195px |
| vb | 8.44px | 844px | 422px |
| svh | 7.8px | 780px | 390px |
| lvh | 8.44px | 844px | 422px |
| dvh | 8.1px | 810px | 405px |
| svw | 3.9px | 390px | 195px |
| lvw | 3.9px | 390px | 195px |
| dvw | 3.9px | 390px | 195px |
The real pixel height of a full-height element written four different ways, plus the difference from the large viewport height.
| Unit | Height | Shorter than lvh |
|---|---|---|
| 100vh | 844px | 0px |
| 100svh | 780px | 64px |
| 100lvh | 844px | 0px |
| 100dvh | 810px | 34px |
:root {
--vw: 3.9px; /* 1vw */
--vh: 8.44px; /* 1vh = 1lvh */
--svh: 7.8px; /* 1svh */
--dvh: 8.1px; /* 1dvh */
}.hero {
/* fallback: always fully visible */
height: 100svh;
/* when dynamic viewport units are supported, hug the visible area */
height: 100dvh;
}:root {
--app-height: 780px;
}
.hero {
height: var(--app-height, 100vh);
}Choosing between svh, lvh and dvh
| Unit | Pros | Cons | Use it for |
|---|---|---|---|
| vh | The broadest support and stable values on desktop; nothing changes while scrolling. | Equal to the large viewport height, so on mobile the bottom is hidden behind the expanded toolbar — 100vh is usually tens of pixels taller than what you see. | Desktop-only full-height sections, or as a fallback when svh already covers the mobile case. |
| svh | Always fully visible and never jumps when the toolbar expands or collapses. | It uses the smallest height, so a gap appears at the bottom once the toolbar retracts. | Anything that must be seen in full on the first screen: onboarding, sign-in, forms whose buttons must not be covered. |
| lvh | The largest value, so the block visually fills the screen. | Like vh it can be covered by the toolbar, so the bottom of the content may be hidden. | Backgrounds and decorative full-bleed images where a little cropping does not matter. |
| dvh | Always equals the currently visible height, so it is visually exact. | The value changes while scrolling, which can trigger reflow and jitter — be careful in performance-sensitive spots. | Full-screen dialogs, drawers and video containers that must hug the visible area. |
Unit reference
| Unit | Basis | Your value |
|---|---|---|
| vw | Viewport width | 1% of viewport width · 1vw = layout viewport width ÷ 100, identical to lvw. |
| vh | Viewport height | 1% of viewport height · 1vh = large viewport height ÷ 100 (identical to lvh). On mobile 100vh is taller than the visible area, which is why toolbars cover the bottom of the page. |
| vmin | Smaller viewport side | 1% of the smaller side · 1vmin = min(width, height) ÷ 100, stable across orientation changes. |
| vmax | Larger viewport side | 1% of the larger side · 1vmax = max(width, height) ÷ 100. |
| vi | Viewport width · Follows the writing mode | 1% of the inline size · Follows the writing mode: vi = vw in horizontal text, vi = vh in vertical text. |
| vb | Viewport height · Follows the writing mode | 1% of the block size · Follows the writing mode: vb = vh in horizontal text, vb = vw in vertical text. |
| svh | Viewport height | 1% of the small viewport height · The height with every browser UI expanded: always fully visible, which suits content that must be seen in full. |
| lvh | Viewport height | 1% of the large viewport height · The height with browser UI retracted, identical to vh: the largest value, but part of it can sit behind the toolbar. |
| dvh | Viewport height · Updates with the browser UI | 1% of the dynamic viewport height · The current visible height, updated live as the UI expands or collapses; it matches what you see, at the cost of elements resizing while you scroll. |
| svw | Viewport width | 1% of the small viewport width · 1% of the smallest viewport width; differs from vw only when the width itself changes. |
| lvw | Viewport width | 1% of the large viewport width · 1% of the largest viewport width, usually the same as vw. |
| dvw | Viewport width · Updates with the browser UI | 1% of the dynamic viewport width · 1% of the current viewport width, updated when the width changes, for example when an overlay scrollbar appears. |
What this tool does
- Work out full-screen blocks before writing them: with a 390 × 844 viewport and 780px visible while the toolbar is open, the tool shows 100vh = 844px against 100svh = 780px so you know how much will be covered.
- Turn pixel values from a design file into viewport units: 50vh is 422px in an 844px-tall viewport, and vmin / vmax scale headings with the screen ratio.
- Debug the classic “the page scrolls a few pixels on mobile” problem — it is usually 100vh being taller than the visible area; switch to svh or dvh.
- Write the team guideline from the trade-off table: when to use svh, when dvh and when plain vh, pros and cons included.
Example
Input
Viewport width 390px, large height 844px, small height 780px, current visible height 810px, converting 50vh
Output
1vh = 8.44px so 50vh = 422px; 100vh = 844px, 100svh = 780px (64px shorter than the large viewport) and 100dvh = 810px (34px shorter)
100vh overflows on mobile precisely because vh resolves against the large viewport, not against what is currently visible.
Frequently asked questions
Why does 100vh cause a scrollbar on mobile?
In the spec vh resolves against the large viewport — the size with the browser toolbar retracted. While the toolbar is visible the usable area is smaller, so a 100vh element is taller than the screen and you get a few dozen pixels of scroll. Use 100svh for guaranteed fit, or 100dvh to follow the visible height.
Should I use svh, lvh or dvh?
Use svh when the first screen must be seen in full (sign-in, onboarding) — it never overflows. Use dvh when the block must hug what is currently visible (full-screen dialogs, drawers, video containers), accepting that the height changes as you scroll. Use lvh for backgrounds and decorative full-bleed images. The usual pattern is svh as the fallback followed by a dvh override.
How do vw and svw / lvw / dvw differ?
Only when the viewport width itself changes: overlay scrollbars appearing, a collapsible sidebar, or horizontal browser UI on some mobile devices. In most cases all four are identical, so remember vw and reach for lvw / dvw in those special layouts.
What are vi and vb?
Logical viewport units: with horizontal text vi equals vw and vb equals vh, and they swap under writing-mode: vertical-rl. They let you support multiple writing modes without a second set of rules.
Can viewport units be used for font sizes?
Yes, but watch accessibility: a pure vw font size scales without limit with the screen and ignores user zoom. The common approach is clamp(1rem, 2vw + 0.5rem, 2rem), which varies smoothly between bounds while leaving room for the reader to zoom.
Keywords：viewport unitsvw vhdvhsvhlvh100vh mobile视口单位视口换算100vh 问题移动端适配vw vh 换算响应式