Задаем размер 100vh без прокрутки для мобильных устройств

20.02.2020

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

Есть страница, высота которой 100vh – один экран без какой-либо прокрутки. На десктопе 100vh будут равны 100% высоты области просмотра и никакой прокрутки не будет. А вот на мобильном устройстве (почти на всех) 100vh будет равно 100% высоты экрана минус интерфейс браузера. И проблема возникает, когда вы начинаете прокручивать экран, интерфейс браузера (адресная строка или кнопки навигации) скрываются и происходит небольшой скачок содержимого страницы. Из-за этого получается ситуация, когда на мобильном при свайпе дергается экран.

Выглядит это примерно так:

Для того, чтобы этой проблемы избежать используем JavaScript и CSS.

В JavaScript вы всегда можете получить значение текущей области просмотра с помощью глобальной переменной window.innerHeight. Это значение учитывает интерфейс браузера и обновляется при изменении его видимости. Хитрость заключается в том, чтобы сохранить значение области просмотра в переменной CSS и применить его к элементу, а не к единицам vh.

Допустим, --vh – это наша пользовательская переменная CSS для этого примера. И мы будем ее использовать в нашем CSS следующим образом:

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Теперь давайте получим внутреннюю высоту области просмотра в JavaScript:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Итак, мы получили высоту области видимости, а затем получили от нее 1/100, таким образом, у нас есть значение, которое нужно назначить в качестве значения единицы высоты нашего окна просмотра. Затем с помощью JS создаем переменную для CSS ( --vh) в :root.

С помощью JavaScript в ваш HTML к элементу <html> будет добавлено правило:

<html style="--vh:8.12px;">

Где 8.12px – это 1/100 от высоты области видимости, и для каждого экрана это число будет разное.

В результате теперь мы можем использовать --vh в качестве единицы измерения высоты, как и любую другую vhединицу, умножив её на 100, и у нас будет полная высота, которую мы хотим.

По итогу, получим такой CSS:

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

Предусмотрим вариант, что экран устройства можно развернуть, и чтобы при ресайзе произошел перерасчет единиц измерения 1/100 высоты области просмотра, будем использовать такой JavaScript:

(function init100vh(){
  function setHeight() {
    var vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  setHeight();
  window.addEventListener('resize', setHeight);
})();

Внимание – могут быть проблемы в IE11 – еще не до конца разобрался, поэтому данную фичу имеет смысл использовать исключительно для мобильных устройств.

Пример работы 100%-ой высоты экрана для мобильных устройств:

See the Pen Viewport Height on Mobile (no resize on update) by Denis (@deniscreative) on CodePen.default

Источник – https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Полезная инфа:

Оставить комментарий