iphone - Safari と Chrome で iOS 7 ステータス バーの色を変更する

Question

SafariとChromeでiOS 7のステータスバーの色を変えたいです。私はモバイル Web アプリに取り組んでおり、それをネイティブに感じさせたいのですが、現在、白いステータス バーしか表示されません。

Answer 1

iOSに他の回答で言及されているバグがある間、私はこれを使用しています。

まず、これでステータスバーを設定しました：

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

私にとって、これはテキストを白く、背景を透明に設定します。それは私のコンテンツにも浮かんでいます。

次に、次のcssがあります：

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

このアプローチでは、ステータスバーに暗い背景があり、透明度があります。

私はこれを ios6 でテストしていません。Apple がバグを修正すると、おそらく壊れるでしょう。また、上にスクロールすると少しずれて見え、バウンス効果によって背景がステータスバーの下から移動します。

それでも、今のところは非常に簡単に修正でき、ほとんどが CSS です。