スマホでサイトをホーム画面に追加したときアプリっぽく見えるようにする

スマホブラウザで開いた時、アドレスバーや機能アイコンなどの表示を消してアプリっぽく見せるとゲームサイトなどはスッキリ見えます。

結論からいうと、HTMLファイルに以下の設定記述をすればホーム画面に追加したときアプリっぽく見えるようになります。

ただ、わたしが確認したAndroid機種（OPPO Reno A）の場合、以下の設定をしてもアドレスバーが消えませんでした。念のため、お伝えしておきます。

設定方法

Androidの場合

<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href="touch_icon.png">	<!--ホームアイコンの設定-->

※Androidでホーム画面に追加する際、利用するブラウザはChromeである必要があります。

iPhoneの場合

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="touch_icon.png" >	<!--ホームアイコンの設定-->

※iPhoneでホーム画面に追加する際、利用するブラウザはSafariである必要があります。

アイコンファイルを設定しておくと更にアプリっぽい

Android、iPhoneともに最終行のホームアイコンの設定の行（<link rel=～の行）は今回特に関係ありませんが、この設定をして正方形の画像（144×144ピクセル以上が望ましい）を用意しておくとホーム画面に追加したときのアイコンファイルに設定されるのでおすすめです。

以下は、touch_icon.pngという画像ファイルをiPhoneのホームアイコンに設定する記述例です。

<link rel="apple-touch-icon" href="touch_icon.png" >	<!--ホームアイコンの設定-->

イメージ

ホーム画面に追加する前のブラウザ表示ではアドレスバーは表示される

ちなみにホーム画面に追加する前のブラウザ表示ではアドレスバーや機能アイコンはふつうに表示されます。meta設定をしていないサイトと同様の表示です。

イメージ

実際のサンプルサイト

アプリ設定あり・なしの2種類のサンプルサイトを用意しました。
ご自身の端末等で確認してみてください。