iPhone および iPhone 用 Safari に対しての Web サイト側で設定できる項目をまとめてみました。
Web クリップ用アイコンの設定
iPhone 用 Safari には、Webページへのリンクをホームスクリーンに配置できる Web クリップという機能があります。この機能を使うことによって、ホームスクリーン上に他の iPhone アプリのアイコンと並んで、 Web ページへ飛ぶアイコンを設置することができます。
この時、Web クリップ用に何も設定をおこなっていない場合、アイコンにはそのページのスクリーンショットが使用されます。
Web クリップのアイコンを独自に設定したい場合は HTML 上で apple-touch-icon を指定します。スクリーンショットではすこし見栄えが悪いので、サイトロゴや favicon に使用しているアイコンなどを設定するのが良いでしょう。
独自にアイコンを設定する場合、画像サイズに注意が必要です。iPhone や iPad などデバイスによって解像度やデバイスピクセル比の違いなどから最適な画像サイズが異なります。現在推奨されているサイズは以下のようになっています。
| iPhone(Plusシリーズ、X、XS、XS Max) | 180px x 180px |
|---|---|
| iPhone(上記以外) | 120px x 120px |
| iPad Pro | 167px x 167px |
| iPad、iPad mini | 152px x 152px |
使用できる画像フォーマットはPNGのみです。ドキュメントルートに apple-touch-icon.png という名前で配置しておけばサイト全体に適用されます。ただし、上記例のように各デバイスごとに最適なサイズを使用したい場合や、サイト全体ではなくページごとに設定したい場合は HTML で明示的に指定する必要があります。
HTML で明示的に指定する場合は link タグを使用します。
<link rel="apple-touch-icon" href="apple-touch-icon_120px.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon_152px.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon_180px.png"> <link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon_167px.png">
上記のように記述すれば自動的に最適なサイズが計算され、適切な画像ファイルが使用されるようになります。
適切なサイズの画像ファイルが見つからない場合はそれより大きいサイズの画像が使用されます。そのため、現時点で一番大きいサイズである 180px x 180px さえ用意しておけばそれなりに見栄え良く表示されるようになります。
iPhone の Simulator で検証してみたかったのですが、どうやら実機でないとうまく再現できないようです。残念。
ちなみにこの設定は apple-touch-icon という名前ですが、設定したアイコンはAndroid の Chrome や Firefox のホーム画面へ追加機能にも使用されます。その際ブラウザ間で使用されるアイコンサイズが異なるっぽいので実際に使用する際は検証した方が良いでしょう。
スタンドアロンモードの設定
スタンドアロンモードは iPhone 用 Safari の機能です。スタンドアロンモードに設定すると、Web クリップから起動した際の見え方を変更することができます。
スタンドアロンモードに設定するには以下の HTML を追加します。
<meta name="apple-mobile-web-app-capable" content="yes">
スタンドアロンモードに設定することで Safari の UI （URLバーなど）がなくなり、ネイティブアプリにように表示されます。
起動時のスプラッシュ画像を設定
スタンドアロンモードにすると Web クリップから起動した時にスプラッシュ画像を表示できるようになります。
スプラッシュ画像の指定は以下の HTML で行います。
<link rel="apple-touch-startup-image" href="./launch.png">
画面サイズに合わせて複数指定したい場合はちょっとめんどくさそうです。
Adding Custom iOS Splash Screens To Your Progressive Web App – Medium
各デバイスの画面サイズは以下で確認できます。
Launch Screen – Apple Developer
ステータスバーの外観を設定
スタンドアロンモードではステータスバーの外観も変更することができます。
変更するには link タグで apple-mobile-web-app-status-bar-style を設定します。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
content の値には black または black-translucent が設定できるようです。
black に設定するとステータスバーは黒くなります。（デモページ）
black-translucent に設定するとステータスバーは透明になります。（デモページ）
電話番号の自動リンクを無効化
Safari では文中に電話番号があると自動的にリンクに変換されます。これを無効化するには meta タグを使用します。
<meta name="format-detection" content="telephone=no">
