2021年決定版はこれ! スプラッシュ画面("apple-startup-image")編

1. 2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！
2. ファビコン(favicon.ico)編
3. アイコン編("apple-touch-icon"と"icon"と"icons")編
4. スプラッシュ画面("apple-startup-image")編
   1. はじめに
   2. ディスプレイの解像度と device-pixel-ratio
   3. TODO iOS 3 時代の情報
   4. 不具合の情報

4.1 はじめに

モバイル Web アプリケーションの為の、Apple の独自実装である "apple-startup-image" がいつ導入されたのかは未調査です。

最新の iPhone 12世代までを集計すると、少なくとも18パターンのスクリーンサイズが存在しました。縦向きと横向きで計36枚のスプラッシュ用画像が必要なわけです。更には後述する、ステータスバーの 20px を引いたサイズが必要なパターンもあるようです。また、iPad のマルチタスクの場合は未調査です。ダークモードも未調査です。

マシンリソースの解放の為に onload 時点で不要と思われる <meta> を削除するコードを導入したところ、スプラッシュ画面が表示されない問題に遭遇しました。iOS では onload 時点での要素への動的変更が、ホームに追加してそこから起動した際の動作に影響していました。

ディスプレイの解像度と device-pixel-ratio

ポートレイトの場合を表にします。

sizes	device pixel ratio	デバイス名
320x480	1	iPod touch 1th
		iPod touch 2th
		iPod touch 3th
		iPhone 1th
		iPhone 3G
		iPhone 3GS
640x960	2	iPhone 4
		iPhone 4S
		iPod touch 4th
640x1136	2	iPod touch 5th
		iPod touch 6th
		iPod touch 7th
		iPhone 5
		iPhone 5c
		iPhone 5s
		iPhone SE 1th
750x13341134	2	iPhone 6
		iPhone 6s
		iPhone 7
		iPhone 8
		iPhone SE 2th
768x1024	1	iPad 1
		iPad 2
		iPad mini 1
828x1792	2	iPhone XR
		iPhone 11
1080x2340	3	iPhone 12 mini
1125x2436	3	iPhone X
		iPhone XS
		iPhone 11 Pro
1170x2532	3	iPhone 12
		iPhone 12 Pro
1242x2208	3	iPhone 6 plus
		iPhone 6s plus
		iPhone 7 plus
		iPhone 8 plus
1242x2688	3	iPhone XS Max
		iPhone 11 Pro Max
1284x2778	3	iPhone 12 Pro Max
1536x2048	2	iPad 3
		iPad 4
		iPad 5
		iPad 6
		iPad mini 2
		iPad mini 3
		iPad mini 4
		iPad mini 5
		iPad Pro 1th "9.7"
		iPad Air 1
		iPad Air 2
1620x2160	2	iPad 7
		iPad 8
1668x2224	2	iPad Pro 2th "10.5"
		iPad Air 3
1640x2360	2	iPad Air 4
1668x2388	2	iPad Pro 3th "11"
		iPad Pro 4th "11"
2048x2732	2	iPad Pro 1th "12.9"
		iPad Pro 2th "12.9"
		iPad Pro 3th "12.9"
		iPad Pro 4th "12.9"

pwa-asset-generator を参考にしました。

4.3 TODO iOS 3 時代の情報

「「Apple-touch-startup-image」解像度（特にiPad用）？」によると、ステータスバーの 20px を除いた 768x1004 などのサイズ指定がある。

caniuse によると、-webkit-device-pixel-ratio のサポートは iOS 4以降で3.2は不明とのこと。

4.4 不具合の情報

本日、03/22にiOS 9.3正式版が公開されました。 早速アップデートして試したところ、iOS 9.2同様に apple-mobile-web-app-status-bar-style は動作するが apple-touch-startup-image は動作しないという挙動に変更はありませんでした。