Определить скрыта ли адресная строка в мобильном браузере

Question

Моя верстка идет с размером 100vh по высоте в мобильном браузере. Занимает всю высоту экрана.

Но если показана адресная строка, то часть контента выходить за экран.

Что бы увидеть весь контент нужно немного сдвинуть экран вверх, что бы адресная строка исчезла и тогда отображается весь контент целиком.

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

Вопрос в том как детектировать, что адресная строка скрыта.(что бы уведомление скрыть) Возможно есть параметры размеров которые можно проверить.

Возможно есть вариант загрузить страницу сразу без строки. Или прокрутить её автоматически.

(тут человек пишет что решил, но не сказал как)

Answer 1

Как вариант, можно создать невидымый блок для проверки у которого высота 100% и когда разница с высотой блока у которого высота 100vh минимальна(т.к. есть статус бар ~20px) - считать что адресная строка скрыта.

Пример:

<div class="vh"></div>
<div class="perc"></div>

<script>
    window.addEventListener('resize', resize);
    window.addEventListener('load', resize);

    function resize() {
        let vh = document.querySelector('.vh');
        vh.innerHTML = vh.offsetHeight;

        let perc = document.querySelector('.perc');
        perc.innerHTML = perc.offsetHeight
    }
</script>

<style>
    div {
        position: absolute;
        width: 100%;
        opacity: 0.5;
        font-size: 3em;
        color: blue;
    }

    .vh {
        height: 100vh;
        background-color: green;
        text-align: left;
    }

    .perc {
        position: fixed;
        height: 100%;
        background-color: red;
        text-align: center;
    }
</style>

В iframe не работает, поэтому вот пример работы

БЛОГ НА HUSL

Определить скрыта ли адресная строка в мобильном браузере

Ответы (1 шт):