Единица vh, доля от высоты окна браузера, долгое время казалась простым и надёжным способом сделать блок высотой ровно в один экран. Но на мобильных устройствах она преподнесла неприятный сюрприз: высота окна браузера на телефоне меняется, когда появляется или скрывается адресная строка при прокрутке.
Из-за этого блок высотой 100vh на телефоне мог оказаться либо чуть больше видимой области, что вызывало нежелательную прокрутку, либо визуально прыгать при появлении и скрытии панели браузера — раздражающий эффект, с которым долго не было хорошего решения средствами одного только CSS.
Новые единицы решают эту проблему через явное разделение понятий. Svh — это small viewport height, высота окна в самом "сжатом" состоянии, когда все панели браузера видны. Lvh — large viewport height, высота в развёрнутом состоянии, когда панели браузера скрыты и видимая область максимальна.
Dvh — dynamic viewport height — самая практичная из трёх для большинства сценариев: она динамически подстраивается под текущее состояние окна браузера, будь то с панелями или без них, и позволяет блоку действительно всегда точно соответствовать видимой области, без прыжков и лишней прокрутки.
Такие же вариации существуют и для ширины, хотя на практике проблема с прыгающей высотой на мобильных встречается значительно чаще, чем аналогичная ситуация с шириной, поэтому именно вариации высоты обсуждают заметно чаще в контексте этой темы.
Поддержка этих единиц в современных браузерах уже достаточно широкая, и постепенный переход с обычного vh на dvh для полноэкранных блоков становится всё более распространённой практикой именно из-за более предсказуемого поведения на мобильных устройствах.
Подробное объяснение разницы между всеми вариантами единиц вьюпорта есть в статье про единицы измерения на MDN.
