The large, small, and dynamic viewport units

New CSS units that account for mobile viewports with dynamic toolbars.

Nov 29, 2022

Bramus

TwitterGitHubHomepage

The viewport and its units #

To size something as tall as the viewport, you can use the vw and vh units.

• vw = 1% of the width of the viewport size.
• vh = 1% of the height of the viewport size.

Give an element a width of 100vw and a height of 100vh, and it will cover the viewport entirely.

The vw and vh units landed in browsers with these additional units

• vi = 1% of the size of the viewport’s inline axis.
• vb = 1% of the size of the viewport’s block axis.
• vmin = the smaller of vw or vh.
• vmax = the larger of vw or vh.

These units have good browser support.

The need for new viewport units #

While the existing units work well on desktop, it’s a different story on mobile devices. There, the viewport size is influenced by the presence or absence of dynamic toolbars. These are user interfaces such as address bars and tab bars.

Although the viewport size can change, the vw and vh sizes do not. As a result, elements sized to be 100vh tall will bleed out of the viewport.

When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport.

To solve this problem, the various states of the viewport have been specified at the CSS Working Group.

• Large viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
• Small Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

The new viewports also have units assigned to them:

• Units representing the large viewport have the lv prefix. The units are lvw, lvh, lvi, lvb, lvmin, and lvmax.
• Units representing the small viewport have the sv prefix. The units are svw, svh, svi, svb, svmin, and svmax.

The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.

In addition to the large and small viewports, there‘s also a dynamic viewport which has dynamic consideration of the UA UI:

• When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
• When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Its accompanied units have the dv prefix: dvw, dvh, dvi, dvb, dvmin, and dvmax. Their sizes are clamped between their lv* and sv* counterparts.

These units ship in Chrome 108, joining Safari and Firefox which already have support.

Caveats #

There‘s a few caveats to know about Viewport Units:

• None of the viewport units take the size of scrollbars into account. On systems that have classic scrollbars enabled, an element sized to 100vw will therefore be a little bit too wide. This is as per specification.

• The values for the dynamic viewport do not update at 60fps. In all browsers updating is throttled as the UA UI expands or retracts. Some browsers even debounce updating entirely depending on the gesture (a slow scroll versus a swipe) used.

• The on-screen keyboard (also known as the virtual keyboard) is not considered part of the UA UI. Therefore it does not affect the size of the viewport units. In Chrome you can opt-in to a behavior where the presence of the virtual keyboard does affect the viewport units.

Additional resources #

To learn more about viewports and these units check out this episode of HTTP 203. In it, Bramus tells Jake all about the various viewports and explains how exactly the sizes of these units are determined.

Additional reading material:

• CSS Values 4 Specification: Viewport-relative lengths
• ChromeStatus Entry
• Layout Viewport explainer
• Viewport Units explainer