javascript - 将内容保持在 Mobile Safari iOS 8 的底部栏上方

<分区>

我知道 iOS8 不再支持 minimal-ui。但是，我有一些内容固定在网页的底部。

页面高度设置为 100vh 以占据整个视口(viewport)。底部的一些内容显示在底部栏下方。因此，用户必须滚动才能看到该内容。

我希望所有内容都显示在底栏上方。实现这一目标的最佳方法是什么？

最佳答案

一种解决方案可能是为具有 100vh 的元素提供更多的 padding-bottom，以便为 iphone 底部栏留出一些空间。

只需使用此代码来定位带有 Safari 的手机:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding-bottom: 65px; //resize 
    }
}

并且不要忘记将 .safari_only 类添加到您要定位的元素中，例如:

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari  </div>

一个细节:这也会影响 Android 设备中的 Safari 浏览器，但幸运的是，没有多少用户在 Android 设备上使用 Safari，无论如何，如果你需要它，你可以使用另一个 css 规则在 Android 上覆盖该规则。

关于javascript - 将内容保持在 Mobile Safari iOS 8 的底部栏上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32278236/