Corredor

ウェブ、プログラミングの勉強メモ。

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

サファリ (しかけえほん)

サファリ (しかけえほん)

  • 作者: キャロルカウフマン,ダンケイネン,Carol Kaufmann,Dan Kainen,きたなおこ
  • 出版社/メーカー: 大日本絵画
  • 発売日: 2013/07/16
  • メディア: 大型本
  • この商品を含むブログを見る

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

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 を入れると defaultblack のように、ステータスバーが常時表示されるようになる、あの動きだ。ステータスバーの高さは 20px で、この分だけ表示位置がズレる。

実際のサンプル

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


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

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

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