Height 100vh for mobile browsers iPhone and Android | Wiki | PWODEV
, 18.10.2017 14:29

Height 100vh for mobile browsers iPhone and Android


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

Отследить правильный размер экрана нам поможет этот JS код:

Запускать это лучше всего при загрузке страницы, а потом при скролле браузера.
Событие scroll:


Один комментарий на «“Height 100vh for mobile browsers iPhone and Android”»

  1. […] Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана. […]

Добавить комментарий