javascript - 移动版 Safari 地址栏

Question

我的网站响应版本的地址栏有一个非常奇怪的问题，http://beta.life.edu .一切似乎都正常工作，地址栏除外，它在页面上滚动时基本上不会折叠。我已经在以下 LIVE 设备上对此进行了测试:iPhone 5C (iOS7)、iPhone 6 (iOS 8)、iPad Mini (iOS 7)、iPad Mini w/Retina (iOS 8)、Google Nexus 5 (Lollipop)、Google Nexus 7( Lollipop )，结果都一样。

在我的 html 标签上，我应用了以下 css，我认为触发了此行为，但要么我错了，要么我遇到了另一个问题:

html {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

我已经阅读了很多关于这个的论坛帖子，但是我尝试过的任何解决方案都没有改变任何东西，所以这个网站上的滚动显然有问题。普遍接受的做法是添加在页面加载后自动滚动您的网站的代码，但这并不能解决我的问题，因为地址栏在滚动时永远不会隐藏。

Answer 1

只需添加 Javasript 代码:

    // When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

window.scrollTo方法是隐藏地址栏的关键。 iPhone 需要包装 setTimeout 函数才能正确隐藏地址栏——不使用 setTimeout 会导致问题。

奖励:用于已添加书签的网站的 META 标记

如果用户已将您的 Web 应用程序添加到他们的跳板，则以下元标记可以从浏览器中删除顶部栏:

<meta name="apple-mobile-web-app-capable" content="yes" />

仅此而已!地址栏一直隐藏，直到用户在应用程序的顶部栏附近向下滑动。

来源:http://davidwalsh.name/hide-address-bar