如何隐藏移动浏览器的地址栏?

时间:2016-05-23 15:59:38

标签: javascript mobile-browser address-bar

移动设备上的Safari和Chrome都会在页面加载时包含可见的地址栏。当页面的body滚动时,这些浏览器会在屏幕上滚动地址栏,为网站提供更多空间,如下图所示:

Note the missing Address bar in the right image

我在我的网站上遇到了一些问题。我正在使用Pokedex,其中包含很长的所有口袋妖怪列表。但是,通过我设置页面的方式,它不希望滚动地址栏。

Note that by scrolling the address bar is still visible

我的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滚动页面正文会隐藏它,但what I've tried so far无法正常工作。当我这样做时,没有发生可见的滚动。

如何在页面加载后立即滚动页面以隐藏移动浏览器的地址栏?

编辑:我越是关注这一点,没有用户互动就越不可能。如果我需要用户交互,用户在屏幕中心触摸是否可能首先尝试滚动主体,然后尝试滚动包含所有条目的div?如果按照我想的方式工作,那么它会先滑动地址栏,然后再滑过列表。它与默认浏览器行为相反,所以它可能不可能/简单/可靠,但我愿意尝试看看是否有任何想法。

8 个答案:

答案 0 :(得分:13)

我知道这是旧的,但是我必须在这里添加。

虽然这不是一个完整的答案,但它是“另外”。

如果您不使用https,则地址栏不会消失。

ALSO

如果您使用的是https,但地址栏仍然无法隐藏,则您的网页中可能会有一些https错误(例如,某些图片是从非https位置提供的)。

希望这会有所帮助。

答案 1 :(得分:7)

看看这个HTML5摇滚帖子 - http://www.html5rocks.com/en/mobile/fullscreen/基本上你可以使用JS,或者全屏API(更好的选项IMO)或者向头部添加一些元数据来表明该页面是一个webapp

答案 2 :(得分:3)

这应该是隐藏地址栏所需的代码:

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

顺便说一下,还有漂亮的Pokedex!希望这有帮助!

答案 3 :(得分:1)

归档隐藏在页面滚动中的浏览器地址栏的最简单方法是将"display": "standalone",添加到manifest.json文件中。

答案 4 :(得分:1)

创建主机文件 = manifest.json

html 标签头

subprocess.check_output(["ifconfig", options.interface]).decode('utf-8')

文件

manifest.json

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

答案 5 :(得分:0)

就我而言,问题出在CSS和HTML布局中。 布局类似于html-body-root-... html body # The linker stage edit: test.o gcc -Wall -o edit test.o -Lsrc -ltermbox # Compile stage test.o: test.c termbox/src/termbox.h gcc -Wall -c test.c -ltermbox/src ,而 root overflow: hidden

移动版上的此布局浏览器标签不会隐藏。 为了解决这个问题,我从 html body 中删除position: fixed, height: 100vh,并从 root 中删除overflow: hiddenposition: fixed

答案 6 :(得分:0)

您可以在用户允许时进入全屏模式:)

<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>

答案 7 :(得分:0)

在铬最新。添加以下css滚动时自动隐藏地址栏(URL栏)!

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

这就是为什么:https://developers.google.com/web/updates/2016/12/url-bar-resizing

希望对您有所帮助!