在隐藏/显示地址栏上禁用iphone缩放/调整大小?

时间:2015-02-10 18:28:30

标签: javascript html css responsive-design frontend

我正在开发一个非常“愚蠢”的特殊网站。它应该是非常华丽的有很多动画,并在此响应。 body元素设置为overflow:hidden;并且审查看起来像这样:

<div id="wrapper">
    <div class="content"> Some content with down button goes here ...</div>
    <div class="content"> Some content with up/down button goes here ...</div>
    <div class="content"> Some content with up/down button goes here ...</div>
    <div class="content"> Some content with up button goes here ...</div>
</div>

每个.content都有一个向上/向下导航按钮,可以滚动到每个div。这些是全宽和高度,如果内容“太大”,div本身是可滚动的。也就是说,只要继续滚动,你就“无法”滚动到下一个内容 - 你必须使用导航转到下一个div。

由于调整大小会改变内容,因此.content的对齐可能会崩溃。也就是说,可以看到两个内容div(比如#1的80%和#2的20%。因此我有一个“重新”页面的功能,并在调整大小时让你到顶部(.content#1) 。

这在桌面上工作正常(在android上的chrome中)但是那时还有iOS和Safari。地址栏可见,经典window.scrollTo(0,0);(或window.scrollTo(0,1);)无效。精细。我可以忍受这一点。但是,在某些情况下,当你滚动内容时,safari就会想到“嘿,让我们现在隐藏地址栏”(我还没弄清楚这个逻辑是怎么回事),这被看作是一个带给你的rezise顶端。 那么,是否有任何明智的方法可以始终保持地址栏可见,或者总是将其隐藏起来?

或解决此问题的其他任何想法?

2 个答案:

答案 0 :(得分:0)

不,当用户滚动时,无法在iOS 8(可能是7)中保持地址栏可见。

答案 1 :(得分:0)

我在使用Chrome Mobile时遇到了同样的问题。当我滚动时,地址栏消失,使窗口调整大小事件。 解决方案是在滚动事件处于活动状态时阻止调整大小事件。

https://stackoverflow.com/a/31546432/1612318