svmax
A hundredth of the longer side with browser toolbars shown.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1svmax = 1% of max(svw, svh)
How it works
1svmax is 1% of the larger of svw and svh. Held upright, the window has its longer side in the height, so the value follows the small height and sits at or below lvmax. In a window wider than tall the width is the longer side, and if the toolbars take only height they cannot matter.
Because the small readings are the smallest, svmax is the least generous unit for covering a screen. A layer at 100svmax reaches across the small viewport, and after the toolbars retract it can fall short of the large one, where lvmax is correct. It is also the wrong unit for anything that must fit, since a block of 100svmax is longer than the window in the shorter direction. A glow that must not cause scrolling needs overflow: clip on its parent, whichever unit sizes it.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
A cover for the small viewport, with its overflow clipped on purpose.
Watch out
A square of 100svmax is longer than the window in its shorter direction. Clip it or let it overflow on purpose.
.backdrop {
inline-size: 100svmax;
aspect-ratio: 1;
}