design

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

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

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

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

- [Viewport concepts — web.dev](https://web.dev/articles/viewport-units) — dvh, svh, lvh и fallback.

- [length: dvh — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport) — Справочник единиц.

---

## Fallback

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

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

beforetoggle: хук жизненного цикла popover

Аналитика до открытия панели.

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.