Установка высоты до 100vh работает, но я получаю полосу прокрутки в мобильных браузерах

Question

У меня есть веб-сайт с центрированным экраном входа. Это идеально отцентрировано во всех браузерах, но когда я открываю его на моем android телефоне, страница получает полосу прокрутки, я думаю, это происходит из-за навигационного меню в моем мобильном браузере, которое исчезает, когда я прокручиваю вниз на веб-странице.

body{
  margin:0;
}

.centered_layout {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="centered_layout">
    Centered app
</div>

Answer 1

Это известная проблема в мобильных браузерах ( Ошибка ), также в IOS. Вы можете прочитать больше об этом здесь: Трюк для просмотра единиц измерения на мобильном телефоне

Решение состоит в том, чтобы использовать JavaScript для вычисления "window.innerHeight":

const appHeight = () => {
    document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
};
window.addEventListener('resize', appHeight);
appHeight();

html, body {
    margin: 0;
    font-family: sans-serif;
}
 
.centered_layout {
    display: grid;
    place-items: center;
    height: 100vh;
    height: var(--app-height, 100vh);
}

<div class="centered_layout">
    Centered app
</div>