dvh, svh и lvh: высота hero без «прыжка» на мобильном

Почему `100vh` обрезает блок под адресной строкой Safari и что ставить в 2026.

Классический `100vh` на iOS включает область под скрывающейся панелью браузера — hero и fullscreen-секции «прыгают» при скролле.

Единицы `dvh` (dynamic), `svh` (small) и `lvh` (large) описывают видимую высоту точнее; для стабильного первого экрана часто берут `min-height: 100svh`.

Viewport concepts — web.dev — dvh, svh, lvh и fallback.
length: dvh — MDN — Справочник единиц.

Fallback

Дублируйте `min-height: 100vh` перед `100dvh` для старых браузеров через `@supports`.

Не комбинируйте dvh с `position: fixed` hero без теста на Android Chrome.