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黑客，而不是影响类似分辨率设备的黑客攻击？

P.S。现在我增加了bottom的价值来克服这个问题。

Answer 1

它是known issue by design with Safari

这完全是故意的。我们需要花费大量的工作才能达到这个效果。：）

基本问题是：滚动时可见区域会动态变化。如果我们相应地更新CSS视口高度，我们需要在滚动期间更新布局。不仅看起来像狗屎，但在大多数页面中以60 FPS的速度执行此操作几乎是不可能的（60 FPS是iOS上的基线帧速率）。

很难向你展示“看起来像狗屎”的部分，但想象当你滚动时，内容会移动，你想要的在屏幕上不断移动。

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

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

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

bottom：0在iphone中有问题

1 个答案: