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

Question

[Multigame]

Добрый день.

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

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

Единственное как мы пока гарантированно это исправляли - запрещали touchmove на странице. Что на мой взгляд не слишком кошерно.
Я неправильно живу? и человечество давно придумало как с этим бороться? или все создатели страниц без прокрутки под мобилы обязаны мучатся с touchmove?

Comments

[xutegino]

Та же проблема! 100vh работает некорректно из-за поведения браузеров на андроиде. Ломается идея верстки, параллакс. Как решить? Что в manifest.json надо?

[Сергей delphinpro]

Отключить нафиг все вау-эффекты на мобильных. Нечего батарейку пользователям разряжать.

[Multigame]

Сергей, Никаких эффектов то и нет. Просто страница без прокрутки.

Answer 1

[Airat Galiullin]

https://stackoverflow.com/questions/23164503/disab...

P.S. Возможно кому-то пригодится

Answer 2

[Андрей Федоров]

для android есть опции в manifest.json, для ios не могу подсказать.

Comments

[xutegino]

Каки опции подскажите пожалуйста очень прошу? Меня та же проблема беспокоит...

Answer 3

[Claus]

Как решение, задать контейнеру страницы:

.wrapper {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
}

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