iOS移动游猎 - 底栏覆盖我的页脚

Question

iOS移动版Safari具有地址和底部导航栏，当您向上滚动时会进入视图，并在向下滚动时隐藏/最小化。我的UI中有一个页脚被底部导航栏隐藏，我不确定解决这个问题的最佳方法是什么。我可以使用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 类添加到您要定位的元素（shouold是您的主要容器），例如：

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

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