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（棒棒糖），都有相同的结果。

在我的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标记

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

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

就是这样！地址栏将隐藏，直到用户向下滑动到应用程序的顶部栏附近。

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

Answer 2

所以，我不完全确定为什么会出现这种情况，但在body标记上我有overflow-x: hidden声明。我将它从这个移动到我的网站包装类，一切都是固定的。感谢您的努力，@ abdelrahman-wahdan

移动Safari地址栏

2 个答案: