css-values-4 introduces several new viewport-percentage units. This site attempts to demonstrate how those units relate to existing concepts.
100 lvh =
100 dvh =
100 svh =
window.innerHeight =
The large viewport size is equivalent to the UA-default viewport size. It represents the largest size the viewport may be when UA interfaces have retracted.
The dynamic viewport size is equivalent to the fixed position layout viewport. It represents the current viewport size and is also equivalent to the window size.
The small viewport size is equivalent to the initial containin block. It represents the smallest viewport size when UA interfaces are shown.
These equivalent existing measurements behave the same on Safari, Chrome and Firefox when showing / hiding top controls.
Where they vary is their behavior when you bring up a virtual keyboard - e.g. on the input below. On Safari (and ChromeOS) the virtual keyboard does not affect any of these units, as it only reduces the size of the virtual viewport. On Android Chrome and Firefox, the size of the viewport is reduced by the size of the keyboard. It's likely that the new units would have the same issue and we will need to resolve this.