Не так давно делал сайт на WordPress, где было много выпадающих и выпрыгивающих полноэкранных элементов, похожих по механизму действия на попапы. Проблема, которую я ощутил на себе, была в том, что эти элементы занимали всю область просмотра. На десктопах с этим вообще проблем нет, но вот на мобильном то и дело возникают трудности.

Современные мобильные браузеры, например, Safari, имеют встроенное поле поиска внизу экрана, которая то пропадает, то появляется при скроллинге. Если ваша верстка на сайте жестко привязана к высоте экрана, с помощью объявления в css height: 100vh к контейнеру, то вы можете получить некрасивость в виде ушедшего за строку поиска элемента (кнопки или части текста, например). А если вы еще и прокрутку отключили за ненадобностью, то считайте, что впечатления юзера испорчены окончательно.

К счастью, CSS не стоит на месте и вот уже определенное время существует несколько новых единиц измерения, которые четко реагируют на изменение размеров вьюпорта. Жаль я о них узнал поздновато.

О единицах 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. Свой проект, о котором рассказывал в начале статьи, я переделывать не стал, поскольку по желанию клиента добавил во всех фиксированных полноэкранных блоках прокрутку. Но если бы я знал о таком чуде-чудесном, то безусловно использовал бы его. На это все. Всем пока!