Paul Osmachko, 18.10.2017 14:29
Height 100vh for mobile browsers iPhone and Android
При высоте контейнера height:100vh; на мобильных устройствах, этот контейнер немного перекрывается адресной строкой вверху, либо панелью управления мобильного браузера внизу. Мобильном устройстве, при прокрутке страницы ниже, адресная строка и панель управления убираются, после чего наш контейнер показывается полностью.
Отследить правильный размер экрана нам поможет этот JS код:
window.innerHeight //показывает действительную высоту экранаЗапускать это лучше всего при загрузке страницы, а потом при скролле браузера.
Событие scroll:
window.onscroll = function () {
// scroll event
};Читайте также:
- Отцентровать popup с помощью css
- Как привязать футер к низу страницы
- Настройка PhpStorm pug (jade) и less Watchers
- Текст в одну строку и троеточие в конце CSS
- Height 100vh for mobile browsers iPhone and Android
Один комментарий на «“Height 100vh for mobile browsers iPhone and Android”»
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
[…] Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана. […]