Единица 100vw на мобильном браузере нередко оказывается шире видимой области: адресная строка и панель инструментов частично перекрывают контент, а блок с шириной 100vw провоцирует горизонтальный скролл. Именно из-за этого поведения в спецификацию CSS Values and Units Level 4 добавили динамические единицы dvw, и отличие vw от dvw стало одним из частых вопросов при адаптивной вёрстке.

Коротко: vw — это 1% от ширины исходного (наибольшего) вьюпорта, а dvw — 1% от динамического вьюпорта, который пересчитывается при появлении и скрытии элементов интерфейса браузера. Ниже разберём, как это работает на практике, где каждая единица уместна и как не сломать макет.

Что такое vw и как работает классическая единица

Единица vw (viewport width) равна одному проценту от ширины области просмотра. При ширине экрана 390 пикселей значение 1vw составит 3,9 пикселя, а 100vw — все 390. На десктопе, где размер окна меняется только вручную, это поведение предсказуемо и проблем не создаёт.

Сложности начинаются на мобильных устройствах. Во многих мобильных браузерах адресная строка и нижняя панель навигации автоматически скрываются при прокрутке страницы вниз и появляются при прокрутке вверх. Классический vw рассчитывается от размера вьюпорта в состоянии, когда интерфейс браузера скрыт, то есть от наибольшего возможного размера. Пока панели видны, реальная видимая область меньше, и элементы, привязанные к 100vw и 100vh, могут выходить за её пределы.

Типичные симптомы, с которыми сталкиваются верстальщики:

  • 📱 горизонтальная полоса прокрутки на мобильном при заданной ширине 100vw;
  • ✂️ нижняя часть полноэкранного блока обрезана панелью браузера;
  • 🔄 дёрганье кнопок и фонов при скролле, если размеры привязаны к вьюпорту;
  • 📏 несовпадение расчётов в JavaScript через window.innerWidth с CSS-единицами.

Что такое dvw и зачем понадобились новые единицы

Буква d в dvw означает dynamic — динамический. Значение 1dvw — это 1% от ширины динамического вьюпорта, то есть той области, которая реально видна пользователю прямо сейчас, с учётом открытых панелей браузера. Когда адресная строка скрывается, значение dvw пересчитывается, и элемент плавно занимает освободившееся пространство.

Помимо dvw, спецификация вводит ещё две пары единиц, и понимать их важно, чтобы осознанно выбирать инструмент:

  • 📐 svw (small viewport width) — 1% от наименьшего вьюпорта, когда все панели браузера развёрнуты;
  • 📏 lvw (large viewport width) — 1% от наибольшего вьюпорта, когда панели скрыты; по сути соответствует классическому vw;
  • 🔄 dvw — промежуточное значение, плавающее между svw и lvw в зависимости от состояния интерфейса.

Те же три варианта существуют и для высоты: svh, lvh, dvh, а также для меньшего и большего из двух измерений — svmin/dvmin/lvmin и svmax/dvmax/lvmax. На десктопных браузерах, где интерфейс не прячется при скролле, все три значения обычно совпадают.

📊 Какие единицы вы используете для полноэкранных блоков?