2017-10-14

iOS Safari から追加したフルスクリーンモードアプリのステータスバーの表示仕様を変える

前回紹介した、apple-mobile-web-app-capable による「ウェブページをネイティブアプリっぽく見せるフルスクリーンモード」だが、このフルスクリーンモードの時にステータスバーの表示仕様を変更する方法があることが判明。早速試してみた。

iOS Safari で Web ページを「ホームに追加」した時にフルスクリーン表示にする

apple-mobile-web-app-status-bar-style

こちらも meta 要素で、apple-mobile-web-app-capable と同時に apple-mobile-web-app-status-bar-style というメタ宣言をする。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

このように設定したページを「ホームに追加」して開くと、ステータスバー部分は白色の背景に黒文字、というデザインになる。

apple-mobile-web-app-status-bar-style に設定できる値は以下の3つ。

default … 白色の背景に黒文字。未指定の時と同じ見た目。
black … 黒色の背景に白文字。
black-translucent … 透過背景に白文字。ステータスバーの高さがなくなるので、Web ページの最上部にステータスバーの文字が重なって表示されるような見た目になる。

Cordova アプリを作っている人なら black-translucent の挙動は馴染みがあるかも。cordova-plugin-statusbar を入れると default や black のように、ステータスバーが常時表示されるようになる、あの動きだ。ステータスバーの高さは 20px で、この分だけ表示位置がズレる。

実際のサンプル

以下にそれぞれの設定を行ったページを用意したので、それぞれ「ホームに追加」して動作確認してみてほしい。

default と black は使いやすいと思うが、black-translucent はクセがある。

ステータスバーの文字が重ならないようページ上部に余白を開け、白背景のページにすることでステータスバーがないページのように見せる。
- 電池残量のアイコンは黄緑色とか赤色とか色が付くので、コレが隠しきれず微妙だけど…。
ステータスバーの背景色となるような、任意の背景色を付けたボックス要素を position: fixed でページ上部に固定してステータスバーの背景色をカスタムする。
- 白文字の方は変えられないので、濃いめの色しか選べないけど。
いずれの場合も、スクロールが発生する場合はステータスバー部分とコンテンツが重ならないように配慮が必要。

なお、ステータスバーは iPhone を横向きにしたとき (ランドスケープ表示という) は表示されない。