iOS移動Safari - 底部欄覆蓋我的頁腳

iOS移動Safari瀏覽器具有地址和底部導航欄，當您向上滾動時可以進入視圖，並在向下滾動時隱藏/最小化。我的UI中有一個頁腳被底部的導航欄隱藏，我不確定要解決這個問題的最佳方法是什麼。我可以使用javascript來檢測我正在使用的瀏覽器，然後相應地編輯css，但我想知道是否有更好的CSS解決方案。iOS移動Safari - 底部欄覆蓋我的頁腳

編輯：我發現了一些我需要的網站的例子，但我似乎無法重複他們的行爲。

來源

2015-07-21 kaustubhb

您是否找到了解決方案？ – Jeffpowrs

我有點運氣檢測瀏覽器的代碼是這樣的：'if（/iP/.test（navigator.platform）&& /Safari/i.test(navigator.userAgent））{ \t \t _this.setFooterForMobileSafari（）「......但現在我的解決方案是讓沒有頁腳的頁面。 – kaustubhb

一種解決方案可以給多一點填充底到你的主容器，以便留有一定的空間，以iPhone的底部欄。

只需使用此代碼與Safari瀏覽器爲目標的手機：

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding-bottom: 65px; //resize 
    } 
}

而且不要忘記將.safari_only類添加到您要定位的元素（shouold是你的主容器）例如：

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari </div>

一個細節：這是要去也影響到Android設備上的Safari瀏覽器，所幸沒有多少用戶使用Safari瀏覽器在Android設備上，無論如何，如果你需要它，你可以使用其他的CSS規則覆寫在Android上的規則。

來源

2017-03-31 21:14:41

iOS移動Safari - 底部欄覆蓋我的頁腳

回答

相關問題