Как победить увеличение высоты страницы на мобильных устройствах?

Добрый день.

Уже неоднократно сталкивался с проблемой на мобильных устройствах. Большинство браузеров при прокрутки страницы вниз скрывают адресную строку из за чего увеличивается высота страницы.

И если страница body height=100vh то случаются различного рода проблемы.
Например слои "прибитые" к нижней границе при загрузке частично скрыты, и только если промотать вниз (= скрыть адресную строку), становятся видны полностью.
Или обратный случай. Фон заданный body, даже с background-size=cover при скрытии адресной строки появляется белая полоса без фона высотой равная размеру адресной строки.

Единственное как мы пока гарантированно это исправляли - запрещали touchmove на странице. Что на мой взгляд не слишком кошерно.
Я неправильно живу? и человечество давно придумало как с этим бороться? или все создатели страниц без прокрутки под мобилы обязаны мучатся с touchmove?
  • Вопрос задан
  • 1609 просмотров
Пригласить эксперта
Ответы на вопрос 3
aliencash
@aliencash
Партизан
для android есть опции в manifest.json, для ios не могу подсказать.
Ответ написан
@Santa_Claus
Как решение, задать контейнеру страницы:
.wrapper {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
}

Т.о., скроллиться будет содержимое контейнера, а не body. При этом, адресная строка не скрывается.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 мая 2020, в 19:41
3000 руб./за проект
25 мая 2020, в 19:36
50000 руб./за проект
25 мая 2020, в 19:25
3000 руб./за проект