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

b1uwtaje 于 11个月前发布在 iOS

关注(0)|答案(2)|浏览(217)

iOS移动的Safari有一个地址和底部导航栏，当你向上滚动时会出现，当你向下滚动时会隐藏/最小化。我的UI中有一个页脚被底部导航栏隐藏，我不知道解决这个问题的最佳方法是什么。我可以使用JavaScript来检测我正在使用的浏览器，然后相应地编辑CSS，但我想知道是否有更好的，CSS唯一的解决方案
编辑：我发现了一些网站的例子，做我需要的，但我似乎不能复制他们的行为。

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

ios

来源：https://stackoverflow.com/questions/31541998/ios-mobile-safari-the-bottom-bar-covers-my-footer

2条答案

按热度按时间

jm2pwxwz1#

一个解决方案可能是给予多一点的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上的规则。

赞(0）回复(0）举报 11个月前

j9per5c42#

解决方案在this answer中
Webkit（和其他人）发布了新的单位，以更好地控制视口高度行为。https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/
svh、lvh和dvh是要使用的新视口单位

赞(0）回复(0）举报 11个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答