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

【问题标题】：iOS mobile safari - the bottom bar covers my footeriOS mobile safari - 底部栏覆盖了我的页脚
【发布时间】：2015-07-21 14:31:38
【问题描述】：

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

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

【问题讨论】：

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

标签： ios mobile-safari

【解决方案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 浏览器，因此主要用于移动设备，而不取决于键盘是否打开。