Высота видового экрана на мобильных устройствах

Question

Так что у меня возникают реальные проблемы, которые пытаются создать отзывчивый веб-сайт. Проблема связана с тем, что я использую блок vh, который устанавливает некоторые из моих div на 100% высоты видового экрана.

Хотя это отлично работает на рабочем столе, мой вопрос заключается в том, что окно просмотра на мобильном телефоне фактически изменения:

• Как вы прокрутите вниз панель навигации (с хромом, например) исчезает, что делает окно просмотра выше , Когда это произойдет, divs, которые основаны на модуле vh, снова адаптируются и заставляют все немного скользить (что очень плохо выглядит, когда вы прокручиваете вниз).
• Если вы хотите вернуться к чему-то, что вы пропустили, прокрутка приведет к появлению навигационной панели, и все снова вернется в другую сторону.

Таким образом, если пользователь скользит вверх и вниз на моем веб-сайте, эта проблема сделает его опыт хуже, чем он должен.

Есть ли какое-либо решение, которое позволяет мне устанавливать слишком большие размеры видовых экранов, не позволяя изменять размер/адаптироваться к вещам, которые изменяют размер?

Answer 1

Хорошо. Давайте обойдемся этим. Я знаю только 2 решения в этой ситуации.

• Проще говоря, «грязный» взломать. Когда панель навигации исчезает, это означает, что высота окна просмотра становится выше. Вы можете просто оживить его с помощью css3 удивительных переходов :) transition: height 1000000000000000s. Кто будет так расположен на странице, чтобы увидеть его?)
• JavaScript. Перед просмотром окна просмотра загрузки страницы (JavaScript занимает высоту с помощью панели навигации) установите фиксированную высоту для всех ваших блоков.