2021年決定版はこれ! スプラッシュ画面("apple-startup-image")編
ピクセルサイズの誤りを修正しました。(2022/2/20)
- 2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！
- ファビコン(favicon.ico)編
- アイコン編(
"apple-touch-icon"と"icon"と"icons")編 - スプラッシュ画面(
"apple-startup-image")編
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 | ||
| 750x1334 | 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は動作しないという挙動に変更はありませんでした。
2 件のコメント
匿名
この記事のおかげで助かりました、ありがとうございます。
一点、750x1134のところですが750x1334の誤りかなと思います！
iz
ありがとうございます。修正致しました。