lvw
The large viewport's width in hundredths: the window with browser toolbars retracted.
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 1lvw = 1/100 of the width when browser toolbars are retracted
How it works
1lvw is the large viewport’s width, divided by 100: the window with the retractable toolbars pulled away. In a desktop window it is the same as vw and svw, and 10lvw comes to 128px in a window 1280px wide. The specification defines plain vw in terms of the large viewport, so lvw adds no behavior of its own, only a statement of intent.
It belongs in a stylesheet that already uses lvh for full-bleed backdrops. There 100lvw and 100lvh read as a matched pair, and nobody has to wonder whether the width was meant to differ. The pair describes the page with the toolbars retracted.
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
The width half of a full-bleed pair with lvh, written so both read the same way.
Watch out
Plain vw is already defined as the large viewport (see vh), so lvw adds no new behavior. Use it only to make that choice explicit.
.wide {
inline-size: 90lvw;
}