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

iOS移动Safari浏览器具有地址和底部导航栏，当您向上滚动时可以进入视图，并在向下滚动时隐藏/最小化。我的UI中有一个页脚被底部的导航栏隐藏，我不确定要解决这个问题的最佳方法是什么。我可以使用javascript来检测我正在使用的浏览器，然后相应地编辑css，但我想知道是否有更好的CSS解决方案。iOS移动Safari - 底部栏覆盖我的页脚

编辑：我发现了一些我需要的网站的例子，但我似乎无法重复他们的行为。

来源

2015-07-21 kaustubhb

您是否找到了解决方案？ – Jeffpowrs

我有点运气检测浏览器的代码是这样的：'if（/iP/.test（navigator.platform）&& /Safari/i.test(navigator.userAgent））{ \t \t _this.setFooterForMobileSafari（） “......但现在我的解决方案是让没有页脚的页面。 – kaustubhb

一种解决方案可以给多一点填充底到你的主容器，以便留有一定的空间，以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浏览器，所幸没有多少用户使用Safari浏览器在Android设备上，无论如何，如果你需要它，你可以使用其他的CSS规则覆写在Android上的规则。

来源

2017-03-31 21:14:41

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

回答

相关问题