Весь прошлый, 2025-й, год я так усердно работал, что совсем забросил свой сайт: перестал писать статьи в блог, исправлять недочеты и улучшать дизайн. Один раз забежал, чтобы удалить сторонний код и контактные формы из-за страха перед всемогущим РКН и все. А между тем, в прошлом году нас действительно сатло жыжа.

О единицах viewport

Единицы измерения области просмотра (viewport) в CSS были введены еще в далеком 2012 году, и с тех пор они практически не менялись. Для создания адаптивного дизайна используется vh, vw, vmin и vmax.

  • vh (Viewport Height) представляет собой процент от высоты видимой области (viewport). Например, если установить свойству height элемента значение 50vh, то этот элемент будет занимать 50% высоты видимой области страницы.
  • vw (Viewport Width) представляет собой процент от ширины видимой области (viewport).
  • vmin (Viewport Minimum) использует наименьшее значение между высотой и шириной видимой области.
  • vmax (Viewport Maximum) использует наибольшее значение между высотой и шириной видимой области.

Проблемы и решение

Как я уже сказал измененные пользовательские интерфейсы мобильных браузеров теперь сильно влияют на интерфейс сайта. Адресные строки не вытесняют контент вниз или вверх в зависимости от их расположения, а перекрывают его при скролле. Чтобы устранить эти трудности, были введены новые единицы измерения: svh, lvh и dvh.

Вот, что они из себя представляют:

  • svh представляет высоту области просмотра до уменьшения размера пользовательского интерфейса адресной строки.
  • lvh представляет высоту области просмотра после уменьшения размера пользовательского интерфейса адресной строки.
  • dvh использует любое из значений svh или lvh в зависимости от размера интерфейса адресной строки.

В CSS это работает также как и viewport-единицы. То есть вот такая запись будет обозначать, что контейнер займет 90% от высоты экрана независимо будет там отображаться динамическая адресная строка или нет.

app.css
.container {
    height: 90dvh;
}

Кроме вышеобозначенных единиц в спецификации CSS есть и другие, вроде svmax, svmin, dvmax и так далее. Их принцип работы такой же, как и у аналогов из viewport-расчетов размеров экрана, но с учетом отображения браузерной строки.

Глобальная поддержка браузерами новых единиц доходит до 90.55%, если верить Can i Use. Свой проект, о котором рассказывал в начале статьи, я переделывать не стал, поскольку по желанию клиента добавил во всех фиксированных полноэкранных блоках прокрутку. Но если бы я знал о таком чуде-чудесном, то безусловно использовал бы его. На это все. Всем пока!