iOS 移动 safari - 底部栏覆盖了我的页脚

Question

iOS 移动 safari 具有地址和底部导航栏，当您向上滚动时，它们会显示出来；当您向下滚动时，它们会隐藏/最小化。我的用户界面中有一个页脚被底部导航栏隐藏，我不确定解决此问题的最佳方法是什么。我可以使用 javascript 来检测我正在使用的浏览器，然后相应地编辑 css，但我想知道是否有更好的、仅 CSS 的解决方案。

编辑: 我找到了一些可以满足我需要的网站示例，但我似乎无法复制它们的行为。

• http://fetedelabiere.promo-agency.com/mobile/instant-verif-age
• http://www.mountaindew.com/
• http://fornacestudio.com/mobileapp/#projects

Answer 1

一种解决方案可能是为主容器提供更多的 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 上的该规则。