За пределами единиц измерения Viewport: подробный разбор svh, lvh и dvh
Годами фронтенд-разработчики полагались на классические единицы измерения viewport — vw, vh, vmin и vmax — для создания адаптивных макетов. Хотя эти единицы сослужили нам хорошую службу, они всегда страдали от досадного несоответствия: адресной строки мобильного браузера. Когда адресная строка разворачивается или сворачивается, высота вьюпорта (viewport) меняется, что вызывает смещение макета, скачки и поломку дизайна. Встречайте новые динамические единицы измерения: svh, lvh и dvh.
Проблема традиционной единицы измерения «vh»
В большинстве современных мобильных браузеров единица 100vh рассчитывается на основе максимально возможной высоты вьюпорта, фактически игнорируя динамические элементы интерфейса браузера, такие как верхняя адресная строка или нижняя панель навигации. Следовательно, когда пользователь прокручивает страницу, нижняя часть вашего «полноэкранного» контейнера часто оказывается скрытой за интерфейсом браузера. Это вынуждало разработчиков полагаться на сложные JavaScript-хаки или обходные пути CSS для достижения настоящего «полноэкранного» эффекта.
Знакомство с новыми единицами измерения Viewport
Чтобы устранить эти несоответствия, рабочая группа CSS представила новый набор единиц измерения вьюпорта, которые обеспечивают более детальный контроль над тем, как мы измеряем экранное пространство. Это малые, большие и динамические единицы измерения:
- svh (Small Viewport Height): Эта единица представляет собой минимально возможную высоту вьюпорта, рассчитанную так, как если бы элементы интерфейса браузера (например, адресная строка) были полностью развернуты. Она идеально подходит для того, чтобы контент оставался видимым и не перекрывался элементами управления интерфейса.
- lvh (Large Viewport Height): Эта единица представляет собой максимально возможную высоту вьюпорта, рассчитанную так, как если бы элементы интерфейса браузера были полностью свернуты. Это ближайший эквивалент того, как ведет себя классическая единица
vh. - dvh (Dynamic Viewport Height): Самая универсальная из трех единиц. Она автоматически подстраивается под текущее состояние интерфейса браузера. Когда пользователь прокручивает страницу, а адресная строка сворачивается или разворачивается, значение
dvhобновляется в режиме реального времени.
Когда использовать каждую из единиц
Выбор подходящей единицы полностью зависит от ваших дизайнерских целей:
Используйте svh, когда: вы хотите гарантировать, что модальное окно, выдвижная панель навигации или главный блок (hero section) никогда не будут перекрыты интерфейсом браузера, независимо от того, видна ли адресная строка или скрыта. Это создает «безопасную зону» для вашего контента.
Используйте lvh, когда: вы хотите максимально использовать экранное пространство при свернутом интерфейсе браузера. Это полезно для создания эффекта погружения на весь экран, где допустимо небольшое перекрытие после того, как пользователь начнет взаимодействовать со страницей.
Используйте dvh, когда: вам нужен плавный и бесшовный интерфейс. Если ваш макет должен заполнять экран независимо от состояния панелей браузера, dvh — лучший выбор. Это обеспечивает наиболее интуитивное ощущение «полного экрана» на мобильных устройствах.
Лучшие практики внедрения
Хотя svh, lvh и dvh поддерживаются всеми основными современными браузерами, профессиональным стандартом считается предоставление запасного варианта (fallback) для старых сред. Это можно сделать с помощью правила @supports или простого каскадирования CSS:
Пример реализации CSS:
.hero-section {
height: 100vh; /* Резервный вариант для старых браузеров */
height: 100dvh; /* Динамическая высота для современных браузеров */
}
Заключение
Появление svh, lvh и dvh знаменует собой важную веху в адаптивном веб-дизайне. Наконец-то предоставив разработчикам контроль над тем, как интерфейс браузера влияет на размеры макета, эти единицы избавляют от необходимости использовать хрупкие JavaScript-калькуляторы высоты. Внедряя эти единицы в свою CSS-стратегию уже сегодня, вы сможете создавать более чистый, предсказуемый и профессиональный пользовательский опыт на мобильных устройствах.