web-dev-qa-db-ja.com

SafariのiOS 7ステータスバーの色を変更し、Chrome

SafariとChromeでiOS 7ステータスバーの色を変更したい。私はモバイルWebアプリに取り組んでおり、ネイティブな感じがしたいのですが、今は白いステータスバーが表示されるだけです。

What I want to change

iphonemobilemobile-safariios7mobile-website
16
Edvard

私はこれを使用していますが、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です。

13
Mikko Tapionlinna

アップデート3

minimal-uiはiOS 8で削除されました:(詳細はこちら： iOS 8は「minimal-ui」ビューポートプロパティを削除しましたが、他の「ソフトフルスクリーン」ソリューションはありますか？

更新2

IOS 7.1に別のバグが表示されるようになりました。 contentの設定に関係なく、ページのbackground-colorに関係なく、ユーザーがWebアプリをホーム画面に追加すると、ステータスバーは常に半透明になります。デモを参照してください こちら 。

IOS 7.1ではminimal-uiという新しいタグが導入されました。これは、ブラウザーchromeをMobile Safariで非表示にしますが、ホーム画面に追加しても何もしません。詳細 ここで 。

更新

7.0.4のバグです。

IOS 7.0.3の時点でバグがあるようです。

<meta name="Apple-mobile-web-app-status-bar-style">が定義されていないか、content="default" =黒のテキストと黒の背景として定義されていない。

content="black" =黒の背景に白のテキスト。

content="black-translucent" =キャンバスの背景が純粋な白でない場合は、黒の背景に白いテキスト（FFF）。または、背景が白の場合は黒のテキストで半透明の背景。

contentなどの他のwhite値は機能せず、defaultの動作が示されます。

enter image description here

このリファレンスで確認： http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

7
Ray Shan

私は同じことをする方法を探していました。これまで見てきた唯一のオプションは、HTMLドキュメントのこれらの3つのメタタグの1つを使用することです。

<meta name="Apple-mobile-web-app-status-bar-style" content="default">

<meta name="Apple-mobile-web-app-status-bar-style" content="black">これにより、ステータスバーが黒になり、ステータスバーの下にコンテンツがプッシュされます。

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">これにより、コンテンツがステータスバーの背後に表示されます。

5
Civilian

体の背景色を変更することで、サファリのトップバーの色合いに影響を与えることができます

 body {
 background-color：blue;/*色合いの*/
 background-image：linear-gradient（to bottom、green 0％、green 100％）;/*ボディ用*/
}

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review 経由

0
Patrick