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

问题描述 投票：24回答：4

移动设备上的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？如果按照我想的方式工作，那么它会先滑动地址栏，然后再滑过列表。这与默认的浏览器行为相反，所以它可能不可能/简单/可靠，但我愿意尝试看看是否有任何想法。

javascript mobile-browser address-bar
4个回答
13
投票

我知道这是旧的，但我必须在这里添加..

虽然这不是一个完整的答案，但这是一个'补充'

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

也

如果您使用的是https且地址栏仍然无法隐藏，则您的网页可能会出现一些https错误（例如某些图片是从非https位置投放的。）

希望这可以帮助..

8
投票

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

4
投票

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

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

顺便看看Pokedex也很漂亮！希望这可以帮助！

3
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.