Задаем размер 100vh без прокрутки для мобильных устройств
Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить для всех, потому как рано или поздно пригодится.
Есть страница, высота которой 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/
Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров,…
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это…
Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…
3 комментария
Ответить
Огромное спасибо автору, жаль не нашёл эту статью месяца 3 назад.
Учусь на курсах, дали готовую сборку и там всё это используется. Прочла что это значит у вас, спасибо:)
Прикольно, успехов!)