CSS 100vh слишком высок на мобильных устройствах из-за интерфейса браузера

Каков наилучший способ решить эту проблему. Очевидно, что все браузеры на мобильных устройствах имеют интерфейс (адресная строка и т.д.) Вверху. Это добавляет дополнительную высоту в область просмотра, поэтому на моем веб-сайте, использующем 100vh, отсутствует раздел.

Я предполагаю, что из-за этого у разных браузеров есть разные размеры видовых экранов, я мог бы просто сделать что-то вроде height: calc(100vh - 50px) или того, что когда-либо было на высоте, но оно не будет соответствовать всем мобильным браузерам?

Ответы

Ответ 1

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

Высота для адресных баров не будет постоянной в браузерах, поэтому я бы не советовал добавлять -50px.

Попробуйте установить высоту (внутри javascript) с помощью свойства window.innerheight.

window.onresize = function(){
    document.body.height = window.innerHeight;
}
window.onresize(); // called to initially set the height.

Извините за любые ошибки, я не работал с JS через некоторое время.

Ответ 2

Принятый ответ не работал для меня. Мне пришлось сделать две корректировки:

  • используйте document.body.style.height вместо document.body.height

  • добавить 'px' в конец window.innerHeight

    document.body.style.height = ${window.innerHeight}px;

Ответ 3

Если элемент является прямым потомком body, вы можете достичь желаемого эффекта с помощью:

html, body {
    height: 100%;
}

#screenheight {
    height: 100%;
    background-color: blue;
}
<div id="screenheight"></div>
<p>Random content after screenheight element.</p>

Ответ 4

Я немного обеспокоен производительностью при использовании JS для решения этой проблемы, которая упоминается здесь, поэтому придумала следующий подход css, чтобы исправить эту проблему.

Как видно из следующего css, я использовал цвет фона 20vh (которого должно быть достаточно, чтобы покрыть зазор) для следующего элемента, чтобы заполнить зазор, чтобы абзацы выглядели непрерывными.

<div class="full-screen-slider">
......
</div>
<main id="maincontent">
</main>
<style>
#maincontent {
    padding-top: 20vh;
    margin-top: -20vh;
    background-color: #f3f3f3;
}
</style>

Ответ 5

Используйте height: 100%, который дает вам высоту после уменьшения высоты строки меню.

Вы можете проверить разницу между 100vh и 100%, используя document.getElementsByTagName('html')[0].scrollHeight в мобильном браузере.

Для меня (Chrome на Andriod) 100vh возвращает более высокое значение, чем 100%, что всегда дает мне вертикальную полосу прокрутки, даже если я ничего не добавил в тело HTML.