iOS移动浏览器-底部栏覆盖了我的页脚 [英] iOS mobile safari - the bottom bar covers my footer

问题描述

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

iOS mobile safari has the address and bottom nav bar that come into view when you scroll upwards, and hide/minimize when you scroll down. I have a footer in my UI that gets hidden by the bottom nav bar, and I'm not sure what the best way to go about fixing this is. I could use javascript to detect the browser I'm using and then edit the css accordingly, but I wanted to know if there was a better, CSS only solution.

我找到了一些满足我需要的网站的示例，但似乎无法复制它们的行为.

I found a few examples of sites that do what I need, but I can't seem to duplicate their behavior.

• http://fetedelabiere.promo-agency.com/mobile/instant-验证年龄
• http://www.mountaindew.com/
• http://fornacestudio.com/mobileapp/#projects

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

推荐答案

一种解决方案是在主容器中增加一些padding-bottom，以便为iPhone底部栏留一些空间.

One solution could be to give a little more of padding-bottom to your main container in order to leave some space to the iPhone bottom bar.

只需使用以下代码即可通过Safari定位手机:

Just use this code to target the mobiles with Safari:

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

并且不要忘记将 .safari_only 类添加到要定位的元素(应该是您的主要容器)，例如:

And don't forget to add the .safari_only class to the element you want to target (should be your main container), example:

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

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

One detail: this is gonna affect also the Safari browser on Android devices, but fortunately not many users use Safari on an Android device, anyway if you need it you can use another css rule for overwriting that rule on Android.

这篇关于iOS移动浏览器-底部栏覆盖了我的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！