javascript– 移动Safari地址栏

概述我的网站响应版本的地址栏有一个非常奇怪的问题,http://beta.life.edu.除了地址栏之外,一切似乎都正常工作,在页面上滚动时基本上不会崩溃.我在以下LIVE设备上进行了测试：iPhone5C(iOS7),iPhone6(iOS8),iPadMini(iOS7),iPadMiniw/Retina(iOS8),GoogleNexus5(Lollipop),G

我的网站响应版本的地址栏有一个非常奇怪的问题,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;}

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

解决方法:

只需添加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

总结

以上是内存溢出为你收集整理的javascript – 移动Safari地址栏全部内容，希望文章能够帮你解决javascript – 移动Safari地址栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。