Platform

apple-touch-startup-image（iOS のスプラッシュ画面）

apple-touch-startup-image は、ホーム画面の Web アプリが起動する間に iOS が表示するスプラッシュ画面を設定する link タグです。アイコンとは違い、これは 1 ファイルではありません。iOS はデバイスの解像度と向きごとに、正確なサイズの別々の画像を求め、それぞれをメディアクエリで選びます。手がかかるため、多くのサイトは省くか、ツールでセット全体を生成します。

すべてのサイズを生成

デバイスごとに 1 枚、メディアクエリで選ぶ

iOS は 1 枚のスプラッシュ画像を引き伸ばして合わせません。デバイスの正確なピクセル寸法と向きに一致させるため、各デバイスにその画面を狙うメディアクエリ付きの apple-touch-startup-image link が必要です。万能のフォールバックはありません。

つまり、きちんとしたセットは十数個以上の link タグになり、Apple が新しい画面サイズを出すたびにリストが変わります。だからこそ、手書きするのではなく通常は生成するのです。

セットの中の 1 エントリ

<link
  rel="apple-touch-startup-image"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
  href="/splash/iphone-12.png"
/>

対象デバイスと向きごとに、それぞれ独自のメディアクエリと正確なサイズの画像で 1 回ずつ繰り返します。

iOS のスプラッシュ画面に関するよくある質問

apple-touch-startup-image とは何ですか？

ホーム画面の Web アプリが起動している間、ページが描画される前に iOS が表示するスプラッシュ画面を定義する link タグです。

なぜこんなに多く必要なのですか？

iOS は各デバイスの解像度と向きに、メディアクエリで正確な画像を一致させ、1 枚を引き伸ばして合わせないため、対象となるすべてのデバイスに独自のエントリが必要です。

そもそもスプラッシュ画面は必要ですか？

サイトが iOS のホーム画面にインストールされ、ブランドのある起動を望む場合だけです。通常のウェブサイトには何もしないので、ほとんどのサイトは省きます。