底部：0 iPhone 出现问题

Question

大家好，我的网站上有以下社交媒体和图标：

<ul class="nav-social-media">
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram"></i></a></li>    
 </ul>

我应用了以下 CSS：

.nav-social-media {
    /*padding-left: 2em;*/
    text-align: center;
    display: block;
    margin-bottom: 1em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
} 

.nav-social-media  > li {
    display: inline-block;
    margin-right: 0.62em; 
}

.nav-social-media  > li > a {
    color: #000;
    font-size: 1.2em;
    display: inline-block;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    text-decoration: none;
}

正如您所看到的bottom:0，这就是社交媒体图标在移动设备上的外观：

但在iphone6中这会导致以下问题：

看看iPhone底栏如何遮盖社交图标，如何克服这个问题？有没有可以使用的原生 iphone hack，而不是影响类似分辨率设备的 hack？

PS 现在我已经增加了值bottom来克服这个问题。

Answer 1

这是Safari 设计上的已知问题

\n

\n

这完全是故意的。我们花了相当多的工作才达到这个效果。:)

\n

基本问题是：当您滚动时，可见区域会动态变化。如果我们相应地更新 CSS 视口高度，则需要在滚动期间更新布局。这不仅看起来很糟糕，而且在大多数页面中以 60 FPS 实现这一点实际上是不可能的（60 FPS 是 iOS 上的基准帧速率）。

\n

很难向您展示 \xe2\x80\x9c 看起来像狗屎\xe2\x80\x9d 部分，但想象一下，当您滚动时，内容会移动，并且您想要在屏幕上显示的内容也在不断变化。

\n

动态更新高度不起作用，我们有几个选择：在 iOS 上删除视口单位，像 iOS 8 之前一样匹配文档大小，使用小视图尺寸，使用大视图尺寸。

\n

根据我们掌握的数据，使用更大的视图尺寸是最好的折衷方案。大多数使用视口单位的网站在大多数时候看起来都很棒。

\n

\n

参考博客可能有一些解决方法

\n

\n
• https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
\n
• https://www.eventbrite.com/engineering/mobile-safari-why/
\n

\n