エメラルドマウンテンの麓。

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

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

sizesdevice pixel ratioデバイス名
320x4801iPod touch 1th
iPod touch 2th
iPod touch 3th
iPhone 1th
iPhone 3G
iPhone 3GS
640x9602iPhone 4
iPhone 4S
iPod touch 4th
640x11362iPod touch 5th
iPod touch 6th
iPod touch 7th
iPhone 5
iPhone 5c
iPhone 5s
iPhone SE 1th
750x11342iPhone 6
iPhone 6s
iPhone 7
iPhone 8
iPhone SE 2th
768x10241iPad 1
iPad 2
iPad mini 1
828x17922iPhone XR
iPhone 11
1080x23403iPhone 12 mini
1125x24363iPhone X
iPhone XS
iPhone 11 Pro
1170x25323iPhone 12
iPhone 12 Pro
1242x22083iPhone 6 plus
iPhone 6s plus
iPhone 7 plus
iPhone 8 plus
1242x26883iPhone XS Max
iPhone 11 Pro Max
1284x27783iPhone 12 Pro Max
1536x20482iPad 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
1620x21602iPad 7
iPad 8
1668x22242iPad Pro 2th "10.5"
iPad Air 3
1640x23602iPad Air 4
1668x23882iPad Pro 3th "11"
iPad Pro 4th "11"
2048x27322iPad 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 は動作しないという挙動に変更はありませんでした。