【问题标题】:Disable iphone scaling/resize on hide/show address bar?在隐藏/显示地址栏上禁用 iphone 缩放/调整大小?
【发布时间】:2015-04-10 22:08:05
【问题描述】:

我正在开发一个非常“愚蠢”的特殊网站。它应该非常华丽,有很多动画,并且在这方面是响应式的。 body 元素设置为溢出:隐藏;结构看起来像这样:

<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 只会想“嘿,让我们现在隐藏地址栏”(我还没有真正弄清楚这个逻辑是怎么回事),这被视为一种让你顶端。 那么,是否有任何聪明的方法可以始终保持地址栏可见,或者始终隐藏它?

或者有什么其他想法可以解决这个问题?

【问题讨论】:

    标签: javascript html css responsive-design frontend


    【解决方案1】:

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

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

    【讨论】:

      【解决方案2】:

      不,当用户滚动时,地址栏在 iOS 8(可能是 7)中是不可能的。

      【讨论】:

      • 好的,有什么建议可以解决我的问题吗?也就是说,实现我想要的结果的好方法? :)
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-11-11
      • 2011-05-06
      • 1970-01-01
      • 1970-01-01
      • 2019-09-25
      • 1970-01-01
      相关资源
      最近更新 更多