iOS mobile 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

一种解决方案可能是给主容器多一点填充底部，以便为 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 上覆盖该规则。