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

В настоящее время я работаю над веб-сайтом с горизонтальной компоновкой. Все элементы имеют положение: абсолютное с javascript. Их размер рассчитывается с помощью window.innerHeight. Моя проблема в том, что, несмотря на то, что элементы не превышают высоту windows, я могу прокрутить вниз (высота адресной панели). Это раздражает двумя способами. Сначала он запускает событие изменения размера windows, которое я не хочу и не нуждаюсь в то время. И во-вторых, он не очень хорошо работает с некоторыми ящиками контента, содержимое которых должно прокручиваться по вертикали. Иногда я могу прокручивать поля, но иногда сначала прокручивается вся страница (как говорилось выше: высота адресной панели). Есть ли какое-либо решение, которое позволило бы мне предотвратить этот механизм автоматического скрытия на всех устройствах.

Заранее спасибо!

Это не прокручивается вообще: http://maxeffenberger.de/test.html

Это можно прокручивать по горизонтали (имеет смысл видеть скрытое содержимое), но также вертикально, пока адресная панель не будет скрыта (нет смысла, поскольку нет дополнительного «вертикального» контента, для которого потребуется больше места: http://maxeffenberger.de/test2 .html

Так я достиг этого:

  html{ background-color: red; overflow: hidden; width:100%; } body{ height:100%; position:fixed; /* prevent overscroll bounce*/ background-color: lightgreen; overflow-y:scroll; -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */ width:50%; margin-left:25%; } 

Наиболее надежным решением может быть использование полноэкранного API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen -API

Используйте этот код стиля на своей странице. Теперь ваш chrome url bar не будет скрывать. Он прекратит прокрутку.

  

Используйте window.innerHeight для установки границ для вашего сайта.

Вы можете установить html и тело или вашу обертку в

 var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 

Имейте в виду, что его необходимо обновлять при каждом изменении размера !

window.innerHeight позволяет получить фактическую высоту внутренней части просмотра браузера (без панели браузера). Вы можете достичь высоты содержимого, когда полоса видима или даже когда она скрыта (выталкивается вниз).

В моем случае :
1. Установите тело до 100vh через CSS.
К сожалению, vh игнорирует полосы браузера, что вызывает некоторые проблемы на мобильных устройствах с современными браузерами, которые скрывают панель во время / после прокрутки. Посмотрите.

Это также мое решение таких проблем, как выше.

2. Вычислите точную высоту через JS с указанной функцией. Обновление при каждом изменении размера!
=> содержимое сайта теперь ограничено внутренней частью представления.

На мобильном телефоне:
Android 7.1.1 / Chrome 61.0 iOS 9.3.5 / Safari

=> теперь панель браузера больше не скрывается в событиях прокрутки и прокрутки .

Иметь ввиду:
Он работает только тогда, когда вы не используете какую-либо библиотеку, которая верит, что вы прокручиваете по горизонтали, но на самом деле используете body.height .

С помощью javascript window.scrollTo (0, 1); вы можете исправить эту проблему.

Посмотрите на http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ для решения.

  • iOS 7 iPad Safari Пейзаж innerHeight / внешний дизайн макета
  • Заполнитель HTML5 исчезает в фокусе
  • Отключение политики одного и того же происхождения в Safari
  • Предотrotation кэширования на задней панели в Safari 5
  • Как проверить AppleScript, если приложение запущено, без его запуска - с помощью утилиты osascript
  • Программно воспроизводить видео со звуком в Safari и Mobile Chrome
  • есть ли css-хак для safari только НЕ хром?
  • Есть ли какие-либо расширения или трюки, чтобы открыть несколько закрытых вкладок в Safari
  • (Действительно) Длинные фоновые изображения не отображаются на iPad Safari
  • HTML5 Video tag не работает в Safari, iPhone и iPad
  • Невозможно просмотреть фильмы Quicktime через HTTPS в Safari или UIWebView
  • Давайте будем гением компьютера.