Как скрыть адресную строку мобильного браузера?

Safari и Chrome на мобильных устройствах включают видимую адресную строку при загрузке страницы. По мере прокрутки body страницы эти браузеры будут прокручивать адресную строку за пределы экрана, чтобы увеличить площадь веб-сайта, как показано на этом изображении:

Обратите внимание на отсутствующую адресную строку на правом изображении

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

Обратите внимание, что при прокрутке адресная строка по-прежнему видна

Мой html выглядит так:

<body>
  <app> <!-- My Angular2 tag for the app, no special styles for this -->
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
  </app>
</body>

Если я прокрутлю список до самого низа (это 721 запись), то любая дальнейшая прокрутка приведет к перемещению адресной строки из верхней части экрана. Если я коснусь панели навигации и перетащу ее вверх, адресная строка исчезнет с экрана. Оба эти способа кажутся неинтуитивными.

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

Как я могу прокрутить страницу настолько, чтобы скрыть адресную строку мобильного браузера вскоре после загрузки страницы?

РЕДАКТИРОВАТЬ: Чем больше я изучаю это, тем более невозможным кажется сделать это без взаимодействия с пользователем. Если мне потребуется взаимодействие с пользователем, возможно ли, чтобы прикосновение пользователя в центре экрана сначала попыталось прокрутить тело, прежде чем пытаться прокрутить div со всеми записями в нем? Если это сработает так, как я думаю, то сначала будет сдвинута адресная строка, прежде чем скользить по списку. Это своего рода обратное поведение браузера по умолчанию, поэтому оно может быть невозможным/простым/надежным, но я хочу попробовать и посмотреть, есть ли у кого-нибудь какие-либо идеи.


javascript mobile-browser address-bar
person Corey Ogburn    schedule 23.05.2016    source источник
comment
Вы можете попробовать window.onload=function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 0); }, но для последних версий браузеров я предлагаю Full screen api   -  person Rayon    schedule 23.05.2016
comment
См. html5rocks.com/en/mobile/fullscreen.   -  person Rayon    schedule 23.05.2016
comment
Возможно, вы получите более точные ответы, если опубликуете скелетный код своей установки, включая CSS и прокрутку JS, которые вы пробовали.   -  person Michael Schmid    schedule 16.09.2020

Ответы (8)


arrow_upward
26
arrow_downward

Я знаю, что это старо, но я должен добавить это сюда.

И хотя это не полный ответ, это «В ДОПОЛНЕНИЕ К»

Адресная строка не исчезнет, ​​если вы НЕ используете https.

ТАКЖЕ

Если вы используете https, а адресная строка по-прежнему не скрывается, у вас могут быть некоторые ошибки https на вашей веб-странице (например, некоторые изображения подаются из местоположения, отличного от https).

Надеюсь это поможет..

person Tony    schedule 24.06.2018
comment
отлично, а как бы ты избавился от бара? - person Mr-Programs; 19.10.2018
comment
Закрепите его на главном экране телефона и нажмите на закрепленное приложение. - person Jack; 05.01.2020
comment
Я знаю, что уже на 2 года поздно задавать дополнительные вопросы, но у вас есть ссылка на утверждение о том, что адресная строка не исчезнет, ​​если вы НЕ используете https? Это не звучит неразумно, но я ничего не могу найти в Google, Apple или Firefox об этом поведении. - person George Hawkins; 23.03.2020
comment
@GeorgeHawkins Я также не смог доказать, что это правда. - person Trever Thompson; 02.11.2020

arrow_upward
14
arrow_downward

Взгляните на этот пост о скалах HTML5: http://www.html5rocks.com/en/mobile/fullscreen/ в основном вы можете использовать JS или полноэкранный API (лучший вариант IMO) или добавить некоторые метаданные в заголовок, чтобы указать, что страница является веб-приложением

person Ant Kennedy    schedule 23.05.2016
comment
Я добавил метатеги, и теперь приложение отлично выглядит/работает, когда я сохраняю веб-сайт на своем рабочем столе, но я не могу заставить полноэкранный API работать при загрузке. Вероятно, для этого требуется взаимодействие с пользователем. - person Corey Ogburn; 23.05.2016
comment
Да, на моем ПК я получаю это в консоли: Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture. - person Corey Ogburn; 23.05.2016
comment
@CoreyOgburn: вы не можете принудительно отображать свою веб-страницу в полноэкранном режиме по соображениям безопасности. Для этого требуется взаимодействие с пользователем. - person Nishal K.R; 01.11.2019

arrow_upward
9
arrow_downward

Это должен быть код, который вам нужен, чтобы скрыть адресную строку:

window.addEventListener("load",function() {
    setTimeout(function(){
        // This hides the address bar:
        window.scrollTo(0, 1);
    }, 0);
});

Кстати, красивый Pokedex! Надеюсь это поможет!

person NiallMitch14    schedule 23.05.2016
comment
У меня это не сработало на моем Nexus 6 под управлением последней версии Android N. У меня нет iPhone для тестирования. Это может быть потому, что я использую Angular2. Окно может запустить событие загрузки до того, как все запросы AJAX, получающие данные о покемонах, вернутся. Если это произойдет, высота документа может быть не заполнена. Я пытался вызвать это после этих запросов AJAX, и это все равно не сработало. - person Corey Ogburn; 23.05.2016
comment
Ни в Chrome на Android 7. Прокручивается, да, но адресная строка все равно видна - person Zander; 03.11.2017
comment
› Осторожно: я говорю вам это как друг. Это существует. Это вещь, но это хак. Пожалуйста, не используйте его. — Пол Из этой статьи Google developers.google.com/web/fundamentals/native -оборудование/ - person Ed Prince; 18.05.2018
comment
Этот код был скопирован отсюда: davidwalsh.name/hide-address-bar - очевидно это работало несколько лет назад - person Philipp; 23.05.2020
comment
на копипаст мне не похоже, проще говоря, этот трюк был по всему интернету в 10-х годах. и да, раньше работало - person wlf; 28.07.2021

arrow_upward
7
arrow_downward

В моем случае проблема была в макете css и html. Макет был примерно таким: html — body — root — … html, body — overflow: hidden, а root — position: fixed, height: 100vh.

При таком макете вкладки браузера на мобильных устройствах не скрываются. Для решения этой проблемы я удаляю overflow: hidden из html и body и удаляю position: fixed, height: 100vh из root.

person Oleg    schedule 08.12.2019

arrow_upward
6
arrow_downward

Самый простой способ заархивировать адресную строку браузера, скрывающуюся при прокрутке страницы, — добавить "display": "standalone", в файл manifest.json.

person Mārcis P    schedule 21.10.2018
comment
Я хотел бы сделать это для людей, которые не добавляют сайт на главный экран, но для тех, кто это делает, это действительно улучшит их опыт. Я был так взволнован этим, что реализовал это сегодня утром. - person Corey Ogburn; 22.10.2018
comment
если я добавляю веб-сайт на главный экран, он работает. Но если я этого не сделаю, в моем случае адресная строка не скрывается. - person MD. IBRAHIM KHALIL TANIM; 12.01.2020

arrow_upward
3
arrow_downward

Вы можете перейти в полноэкранный режим, когда пользователь разрешит это :)

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById("goFS");
  goFS.addEventListener("click", function() {
      
   const elem = document.documentElement;
   if (elem.requestFullscreen) {elem.requestFullscreen()}
   
  }, false);
</script>
person t33n    schedule 30.08.2020

arrow_upward
2
arrow_downward

создать хост-файл = manifest.json

заголовок html-тега

<link rel="manifest" href="/manifest.json">

файл

manifest.json

{
"name": "news",
"short_name": "news",
"description": "des news application day",
"categories": [
"news",
"business"
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"orientation": "natural",
"lang": "fa",
"dir": "rtl",
"start_url": "/?application=true",
"gcm_sender_id": "482941778795",
"DO_NOT_CHANGE_GCM_SENDER_ID": "Do not change the GCM Sender ID",
"icons": [
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=ir.divar"
}
],
"prefer_related_applications": true
}
person developerjavad    schedule 09.01.2021
comment
объяснение? есть ли конкретная запись в манифесте, которая должна решить проблему?? - person knarf; 24.05.2021

arrow_upward
0
arrow_downward

В хроме последний. Добавьте следующий css, чтобы он автоматически скрывал адресную строку (URL-панель) при прокрутке!

html { height: 100vh; }
body { height: 100%; }

Вот почему: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Надеюсь на помощь!

person Dungg Nguyen    schedule 25.12.2020