iOS mobile safari - 底部栏覆盖了我的页脚

Posted 2023-02-24

【中文标题】iOS mobile safari - 底部栏覆盖了我的页脚

【英文标题】：iOS mobile safari - the bottom bar covers my footer

【发布时间】：2015-07-21 14:31:38

【问题描述】：

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

编辑： 我找到了一些可以满足我需求的网站示例，但我似乎无法复制它们的行为。

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

【问题讨论】：

我有一点运气检测到浏览器的代码如下：if(/iP/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)) _this.setFooterForMobileSafari() ...但现在我的解决方案是不用页脚。

【参考方案1】：

一种解决方案可能是为您的主容器提供更多的 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 上的该规则。

【讨论】：

嗨，这个答案看起来很有趣，但我有一个问题：_:: 是什么意思，移动整页媒体是否涵盖了仅打开键盘时的情况？因为只有当您点击输入并打开键盘时才会出现问题。

@Vladyn "_::-webkit-full-page-media, _:future, :root" 被称为 css hack，这是确保应用规则的技巧只是在 Safari 浏览器中。该规则将适用于在宽度低于 767 像素的设备上运行的 Safari 浏览器，因此主要用于移动设备，而不取决于键盘是否打开。