apple-mobile-web-app-capable と iOS の Web アプリメタタグ
apple-mobile-web-app-capable は、ホーム画面から開いたときにサイトを Safari のクローム無しでフルスクリーン起動するよう iOS に伝えるメタタグです。ステータスバーに色を付ける apple-mobile-web-app-status-bar-style と、名前を設定する apple-mobile-web-app-title と組み合わせます。モダンな iOS はますますマニフェストの表示モードを代わりに読むようになっていますが、これらのタグは Safari での確実な手段であり続けます。
ホーム画面のショートカットをアプリのように振る舞わせる
apple-mobile-web-app-capable を yes に設定すると、iOS のホーム画面から開いたサイトは、Safari のツールバー無しで、スタンドアロンのフルスクリーンで起動します。次に apple-mobile-web-app-status-bar-style がステータスバー(default、black、black-translucent)を制御し、apple-mobile-web-app-title がアイコンの下のラベルを設定します。
これらはサイトがホーム画面から起動されたときにのみ効果を持ちます。通常の Safari のタブでは何もしません。
iOS の Web アプリメタタグ
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="My App" />iOS の Web アプリメタに関するよくある質問
apple-mobile-web-app-capable は何をしますか?
iOS のホーム画面から開いたときに、サイトを Safari のクローム無しでフルスクリーン起動させます。通常のブラウザタブでは効果がありません。
black-translucent はステータスバーに何をしますか?
ページをステータスバーの背後まで描かせ、ステータスバーはコンテンツの上に白で重なります。上部の余白を自分で足さないと、ステータスバーがヘッダーに重なってしまいます。
マニフェストがあってもこれらのタグは必要ですか?
ますます必要でなくなっています。マニフェストの "display": "standalone" がフルスクリーン起動を扱います。より古い iOS 向けと、より細かいステータスバー制御のために apple- タグは残しておきましょう。