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

Question

Я строю веб-сайт, который использует 100vh для каждого раздела. Однако в мобильных браузерах это приводит к плохому пользовательскому интерфейсу, так как высота области просмотра увеличивается / уменьшается при скрытии / отображении адресной строки (например, в Chrome). Есть ли способ предотвратить автоматическое скрытие адресной строки при прокрутке?

Веб-сайт Freelancer имеет реализацию, которая исправляет это. Может кто-нибудь объяснить, как это делается? https://m.freelancer.com/

Answer 1

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

К сожалению, нет способа закрепить адресную строку из HTML или кода (по крайней мере, я знаю об этом).

"Поддельный" полноэкранный режим:

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

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

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

Вот как:

Напишите простой сценарий и используйте его на страницах, которые вы хотите использовать в качестве "полноэкранного" - или, если у вас есть страница шаблона, которую использует остальная часть вашего сайта, используйте сценарий на этой странице.

Ты можешь использовать:

<script type="text/javascript">
    window.onLoad = function() {        
        window.scrollTo(0,1);
    }
</script>

Или, если вы используете JQuery:

<script type="text/javascript">
    $(function() {
        $(window).scrollTo(0,1);
    }
</script>

Это "обманывает" браузер, заставляя его думать, что вы уже прокручивали страницу при загрузке, и поэтому автоматически скрывает адресную строку. Это может / не может работать в определенных браузерах.

Опять же - это не прямой ответ на "предотвращение автоматического скрытия адресной строки при прокрутке", но это может улучшить опыт ваших пользователей при первом посещении страниц.

Я использовал: http://www.html5rocks.com/en/mobile/fullscreen/ в качестве ссылки - судя по всему, есть еще много других идей.

Надеюсь это поможет!:)

ОБНОВИТЬ:

Я проделал гораздо больше исследований по этому вопросу, и, похоже, есть и другие способы, которые позволяют заставить браузер работать в полноэкранном режиме, а также предотвратить повторное появление адресной строки при прокрутке вверх.,

Смотрите здесь: http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803 для некоторых (множество) предложений.