Viewport Units Visualizer: vh vs svh, lvh and dvh

This page measures 100vh, 100svh, 100lvh and 100dvh live in your browser — open it on a phone and scroll to watch them change — and writes the CSS that keeps a full-height section clear of the mobile toolbar.

.hero {
  min-height: 100vh;  /* fallback: browsers without svh ignore the next line */
  min-height: 100svh; /* fits with the browser bars shown */
}

What the four numbers mean

CSS Values and Units Level 4 defines three viewport sizes, because a phone browser's own toolbars come and go while you scroll:

• svh — small viewport. The height with every browser bar shown, as on first load. 100svh always fits on the screen.
• lvh — large viewport. The height with the bars retracted. 100lvh is taller than the visible area while the bars show.
• dvh — dynamic viewport. Whatever is visible at the moment; it moves between the two as the bars slide in and out.
• vh — the classic unit. On phones it equals lvh, a stable value chosen so pages don't jump while scrolling. On a desktop all four are the same.

There are matching width units (svw, lvw, dvw), but on phones the toolbars change the height, not the width. The tool above measures the four heights by giving hidden, fixed-position elements a height of 100vh, 100svh, 100lvh and 100dvh and reading their size after each resize and scroll.

The classic bug: a 100vh hero behind Safari's toolbar

Safari on iPhone shows its toolbar when a page opens and collapses it once you scroll. Because 100vh is measured with the toolbar collapsed, a 100vh hero is taller than what the visitor sees on arrival, and whatever sits at its bottom — usually the call to action — is hidden until they scroll. Chrome on Android does the same with its address bar, with a smaller gap. The fix is one extra line: keep 100vh as a fallback and add 100svh after it, as the generator above writes. Browsers that don't know svh drop that line and keep the first one.

Which unit for which job

• Hero or first-screen section: min-height: 100svh. It fits with the bars visible; when they collapse a little of the next section shows, which is harmless. Use min-height, not height, so the section can grow when text wraps or the reader enlarges it.
• App shell, chat window, full-screen map: 100dvh, so the input bar or controls stay at the visible bottom. Expect the element to resize while the bars animate.
• Background that must never show a gap: 100lvh.
• Menu panel or modal: often no unit at all — position: fixed; inset: 0; with overflow-y: auto follows the visible area.

Old workarounds — -webkit-fill-available, or a --vh custom property set from window.innerHeight in JavaScript — are no longer needed and can fight the new units, so remove them when you switch. The 100vh on mobile guide covers each case with examples.

Browser support

The small, large and dynamic units work in Safari 15.4 and later, Chrome 108 and later and Firefox 101 and later (web.dev, MDN). iPhones that cannot update past iOS 15.3 or earlier don't understand them, which is what the 100vh fallback line is for. If this tool says your browser does not support them, you are looking at one of those older browsers.

On iPhone vs Android

• Safari on iPhone shows the biggest difference between svh and lvh, because its toolbar is large when a page opens and shrinks as you scroll.
• Chrome on Android slides its address bar away as you scroll; vh is the large viewport there too. Since Chrome 108 the on-screen keyboard resizes only the visual viewport, so dvh does not shrink when the keyboard opens unless the page sets interactive-widget=resizes-content in its viewport tag.
• Home-screen web apps (display: standalone) have no browser bars, so all four units are equal.

Visible height on load, by phone

Estimated 100svh for the phones in our catalog: the screen height in CSS pixels minus the browser bars as our device profiles model them (status bar and address bar at the top, toolbar or navigation at the bottom). These are our profiles' estimates, not measurements from each phone — the bars differ between browser versions and settings. 100vh and 100lvh are larger by however much of the bars retracts when you scroll.

MobileCheck's free check uses the same profiles: each device's viewport is its screen minus these bars. Our emulated browsers have no toolbar that collapses, so in a report vh, svh, lvh and dvh all resolve to the visible height. To see the units differ, open this page on a real phone. The mobile viewport sizes list has the full screen sizes, and the safe area preview covers the notch and home indicator.

More free tools: color contrast checker · tap target size checker · mobile font size calculator · css media query generator · device mockup generator · safe area inset preview · responsive image srcset generator · link preview checker · ai crawler access checker · image alt text checker · all tools