Избегайте 100vh на мобильных устройствах

7 апреля 2020 года #javascript#css#100vh

Единицы области просмотра в CSS звучат великолепно. Если вы хотите, чтобы элемент занимал всю высоту экрана, вы можете просто установить высоту: 100vh и вуаля - у вас есть идеальный полноэкранный элемент, размер которого изменяется при изменении области просмотра! К сожалению, это не так. 100vh ломается тонким, но фундаментальным способом в мобильных браузерах, что делает его практически бесполезным. Лучше избегать 100vh и вместо этого полагаться на javascript, чтобы установить высоты для полного просмотра.

Основная проблема заключается в том, что мобильные браузеры имеют «полезную» функцию, где адресная строка иногда видна, а иногда скрыта, изменяя видимый размер области просмотра. Вместо того чтобы регулировать высоту 100vh, чтобы она была видимой частью экрана при изменении высоты области просмотра, в этих браузерах вместо 100vh установлена ​​высота браузера с адресной строкой, скрытой. В результате нижняя часть экрана будет обрезана, когда будет видна адресная строка.

Когда адресная строка видна, нижняя часть экрана обрезается, так как мобильные браузеры неправильно устанавливают 100vh, как высоту экрана без отображения адресной строки. На изображении выше кнопки, которая должна быть внизу экрана, вместо этого скрыта. Хуже того, когда пользователь впервые заходит на веб-сайт с мобильного телефона, адресная строка будет видна вверху, поэтому по умолчанию это не работает.

Лучшее решение: window.innerHeight.

Один из способов обойти эту проблему - использовать javascript вместо css. Когда страница загружается, установка высоты в window.innerHeight правильно установит высоту в видимой части окна. Если адресная строка видна, то window.innerHeight будет высотой полного экрана. Если адресная строка скрыта, то window.innerHeight будет высотой только видимой части экрана, как и следовало ожидать.

Жаль, что до сих пор нет простого способа получить элемент, который бы занимал всю высоту области просмотра, не полагаясь на javascript. высота: 100vh так близко к величию, но, учитывая ограничения на мобильных устройствах, лучше избегать этого.

Решения для css может выглядеть вот так:

// styles.css
:root {
    --vh: 1vh;
}

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

// scripts.js
$(function() {
    window.addEventListener('resize', function () {
        set_100vh_var();
        detect_mobile();
    });
    window.addEventListener('orientationchange', function () {
        set_100vh_var();
    });
    
    setTimeout(
        set_100vh_var, 
        50
    );
}

function set_100vh_var() {
    document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
};