底部：0有問題的iphone

嗨，我有以下社交媒體，在我的網站圖標：我已經申請了以下CSS底部：0有問題的iphone

<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>

：

.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的價值來克服這個問題。

來源

2016-06-26 Alexander Solonik

參考的博客，你可以使用'位置：中fixed'代替'位置：absolute'？ –

社交圖標的容器已經位置：固定。 –

我的意思是'.nav-social-media' –

這是一個known issue by design with Safari

這完全是故意的。爲了達到這個效果，我們做了很多工作。 :)

基本問題是這樣的：可見區域在您滾動時動態變化。如果我們相應地更新CSS視口高度，則需要在滾動過程中更新佈局。不僅這看起來像狗屎，而且在大多數頁面中以60 FPS的速度進行操作實際上是不可能的（60 FPS是iOS上的基準幀速率）。

很難向您展示「看起來像狗屎」的部分，但想象一下，當您滾動時，內容會移動，並且您在屏幕上想要的內容會不斷移動。

動態更新的高度不能正常工作，我們有幾個選擇：降視臺iOS上，與文檔大小一樣的iOS 8之前，用小視圖大小，使用大視圖大小。

從我們的數據來看，使用較大的視圖尺寸是最好的折衷方案。大多數使用視口單元的網站大部分時間看起來都很棒。

有可能是一些解決方法

來源

2016-06-26 05:33:33

感謝..會尋找這一點，並接受是否符合我的需要 –

所以他們決定給你無法確定的選項，如果酒吧是開放的，它多大？最好的黑客答案在哪裏？ – Curtis

底部：0有問題的iphone

回答

相關問題