HomeScreen web應用程序中的iOS 8狀態欄疊加+頁腳'欄'

當將它安裝到'home'後使用web應用程序時，iOS的最新更新似乎導致通常的黑色狀態欄透明並浮動在它下面的網頁內容上方。HomeScreen web應用程序中的iOS 8狀態欄疊加+頁腳'欄'

iOS Screen Capture showing the overlap

而且，不合照，是在是推動我對20像素高達固定頁腳中應用的頁腳單槓。

我不希望總是通過iPad提供此應用程序（大多數客戶會選擇價格較低的Android選項），但是我的同事非常常見的是用他們自己的iPad演示應用程序......

我在這裏有什麼選擇？我是否需要做一些「嗅探」，並將這個應用程序轉移到這個設備/版本上？如果是這樣，在不引入更多庫的情況下做到這一點的最佳方式是什麼？我目前正在使用最新的Angular框架+ .NET 4.5.1。

謝謝。

來源

2014-10-06 beauXjames

好吧，既然這個問題顯然有很多興趣，我從那以後找到了問題的答案。

在應用程序的根餘創建了現代的iOS 8

var userAgent = navigator.userAgent; 
$rootScope.isIOS = (userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false);

在初級包裝導航元素之前我有條件地放置塊

<div ng-if="isIOS" class="isIOS">&nbsp;</div>

然後我有SASS測試類

.isIOS { 
    position: fixed; 
    z-index: 10000; 
    top:0; 
    width: 100%; 
    height: 23px; 
    background: $fooColor; 

    & + div { 
     margin-top: 25px; 
    } 
}

和TOP被照顧...狀態欄有一個ba保持固定的ckground，並且滾動瀏覽任何頁面看起來都很棒。

我在底部遇到的空間稍有不同，需要基本佈局中的以下元數據。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

反正......現在一切都很好。如果你來到這裏，發現這個，它有幫助，真棒。如果你從來沒有來過這一切，那麼它真的無所謂，現在呢？

來源

2014-10-10 20:46:51 beauXjames

HomeScreen web應用程序中的iOS 8狀態欄疊加+頁腳'欄'

回答

相關問題