iOS Webアプリ用の複数の「Apple-touch-startup-image」解像度（特にiPad用）？
HTML5ベースのiOS Webアプリケーションを作成しましたが、すべて正常に動作しているようですが、複数の起動画面でそれを磨き上げようとしています。 iPhone/iPod touchは、次のように320x460のPNGでうまく機能します。
<link rel="Apple-touch-startup-image" href="img/startup_screen-320x460.png" />
IPadのスタートアップイメージは、iPhone/iPod touchのように、768x1004（縦）または1024x748（横）の解像度を与えるステータスバーに対応するために、高さから20pxを削る必要があるというドキュメントをたくさん見つけました。ただし、私のテスト（現在はiOS 3.2.2を実行しているiPad）では、768x1004（ポートレート）の解像度のみが機能します（ただし、ランドスケープモードの場合は正しくありません-20pxが狭すぎます）。
私は次のことを試しました（Apple-touch-iconリンク）、使用できません：
<link rel="Apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="Apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="Apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />
リストされている最後のlink要素の場合、768x1004解像度の画像のみが機能します。解像度1024x748の画像が最後の場合、代わりに灰色の背景がレンダリングされます（ただし、768x1004はレンダリングされません）。したがって、明らかにApple-touch-startup-imagelinkは、sizes属性をサポートしていません。
これはiOSの新しいバージョンでサポートされていますか？複数のスタートアップイメージをサポートする方法はありますか？ 1024x768のスタートアップイメージを作成する必要がありますか？その場合、iPhone/iPod touchの場合は縮小されますか？または、あきらめて、iPadの起動イメージを持っていないほうがいいですか？
startup-imageおよびtouch-iconsの決定的なソリューションは、iPadおよびiPhone（ランドスケープ||ポートレート）および（レチナ||なし）の場合：
<!-- iPhone ICON -->
<link href="Apple-touch-icon-57x57.png" sizes="57x57" rel="Apple-touch-icon">
<!-- iPad ICON-->
<link href="Apple-touch-icon-72x72.png" sizes="72x72" rel="Apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="Apple-touch-icon-114x114.png" sizes="114x114" rel="Apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="Apple-touch-icon-144x144.png" sizes="144x144" rel="Apple-touch-icon">
<!-- iPhone SPLASHSCREEN-->
<link href="Apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="Apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="Apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="Apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPhone 6/7/8 -->
<link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image" />
<!-- iPhone 6 Plus/7 Plus/8 Plus -->
<link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="Apple-touch-startup-image" />
実際に機能する回答の組み合わせを提供したかっただけです。選択された答えで、スプラッシュ画像の網膜バージョンは使用されていませんでした。 Pavelの回答により、iPadのRetinaバージョンが修正されました。以下は、iPhone（網膜および非網膜）およびiPad（網膜および非網膜）でテストされています。
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="Apple-touch-icon-precomposed" href="Apple-touch-icon-precomposed.png">
<!-- iPhone SPLASHSCREEN-->
<link href="Apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="Apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="Apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="Apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="Apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="Apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="Apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="Apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="Apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="Apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="Apple-touch-startup-image" />
私はこれを信用することはできませんが、この構成は機能します。コピーして貼り付け、画像の名前が正確に指定されているサイズになるようにしてください。
実際に、ランドスケープモードで動作するようにしました。私はここで情報を得ました： https://Gist.github.com/472519 。
問題は、1024x748ではなく、横長の画像が748x1024（横長の横長画像、時計回りに回転）でなければならないことです。
また、最初にアプリをポートレートモードで起動し、次にランドスケープモードで起動する必要がありました。
1つのリンク要素にメディアプロパティが欠落している場合、私にとってはうまくいきませんでした。コードは、iPhone 3GおよびiPad（ポートレートおよびランドスケープモード）で起動画像を正常に表示しました。
<-- iPad - landscape (748x1024) -->
<link rel="Apple-touch-startup-image" href="images/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->
<link rel="Apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="Apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />
IPhone4（高解像度）を試すことはできませんでしたが、おそらく同じように機能します。
最も完全なGistソリューション： https://Gist.github.com/tfausak/222282
どうやらスタートアップ画面は次の条件でのみ機能します
1）デバイスに必要な正確なサイズでなければなりません。 2）アプリを起動するとき、デバイスは縦向きでなければなりません。 3）いくつかの情報源はpngのみと言っていますが、jpgは現在動作しているようです。
新しいiPad（Retina）のスプラッシュスクリーンを作成する方法を考え出すのに少し時間を費やしました。新しいiPad（Retina）の両方の向きについてテスト済みで動作するソリューションを以下に示します。
追伸これを投稿する前に、私はすでに与えられたソリューションをテストしましたが、それらは機能しませんでした。
<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/Apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="Apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/Apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="Apple-touch-startup-image" />
これは一部の人には明らかかもしれませんが、ホーム画面にショートカットを追加してそこから実行し、次のコードを追加しない限り、スタートアップイメージは機能しません。
<meta name="Apple-mobile-web-app-capable" content="yes" />
このページは、このすべてを理解するのに役立ちました： http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
私は何度もテストしましたが、今はこのように動作するときに動作すると確信しています：最初にパッドを縦向きにして、アプリを開いてから、アプリを横向きにして、アプリを開きます。吸いますが...これがそれを作る唯一の方法のようです。バグを「ロック解除」するには、まずパッドのポートレートを保持する必要があります。
iPhone 6およびiPhone 6+
<link href = "launch6.png" media = "（device-width：375px）" rel = "Apple-touch-startup-image"> <link href = "launch6plus.png "media ="（device-width：414px） "rel =" Apple-touch-startup-image ">
このリンクから： http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers
IPhone/iPad/iPhoneRetinaでWebAppsの4つの個別のスタートアップイメージを取得できた方法は、いくつかのことの組み合わせでした...
非網膜iPhone（320x460）：
<link rel="Apple-touch-startup-image" href="startup-iphone.jpg" />
Retina iPhone（4＆4S）（640x920）：上記のJavascriptテクニックを使用します。 http://www.paulofierro.com/archives/568/
iPad（両方の向き）は注意が必要です。横は748w x 1024hでなければならず、「下」が左側になります。ポートレートは768w x 1004hで、「下」が下でなければなりません。 PHP経由でiPadをユーザーエージェントで検出することにより、iPadタグを含める必要がありました。そうしないと、非網膜iPhoneスタートアップイメージが読み込まれません。
<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
<?php if ($isiPad) { ?>
<link rel="Apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="Apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<?php } ?>
上記を行うと、webapp（実際にはwordpressブログサイト、現在オフラインで作業中）でiPhone、Retina、および両方のiPadの向きのスタートアップイメージを使用できます。最新のiOSを実行するiPhone 3Gでテスト済み4、iPad、iPhone 4とも最新のiOS 5を実行しています。
もちろん、javascriptを介してiPadコードを含めることもできます。笑
完全なメタ：
<!-- Icons -->
<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
sizes="152x152"
rel="Apple-touch-icon">
<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
sizes="144x144"
rel="Apple-touch-icon">
<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
sizes="120x120"
rel="Apple-touch-icon">
<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
sizes="114x114"
rel="Apple-touch-icon">
<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
sizes="76x76"
rel="Apple-touch-icon">
<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
sizes="72x72"
rel="Apple-touch-icon">
<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
sizes="57x57"
rel="Apple-touch-icon">
<!-- Startup images -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="Apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="Apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="Apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="Apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="Apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="Apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="Apple-touch-startup-image">
網膜ディスプレイをターゲットにしたい場合は、解決策を見つけて、ブログでここにブログを書きました： http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios- web-apps-retina-displays-also-welcome
基本的に、サイズプロパティとメディアクエリは機能しません。ページが読み込まれたら、JavaScriptを使用して高解像度の起動画像を挿入する必要があります。ハッキーだが動作する。
この回答は、iOSに現在必要な20個のスプラッシュスクリーンをすべて生成する便利な方法を提供します+iOS 12.1の最新のHTMLマークアップ。
これには、iPhone XR、iPhone XS Max、および11インチiPad Proのソリューションが含まれます
コンテキスト
IOSのSafariはProgressive Web Appsをサポートするようになりましたが、Chromeとは異なる方法で実装しています。 manifestファイルは読み取りますが、その中で宣言されたアイコンは無視します。
代わりに、SafariはApple-touch-startup-imageタグのリストを想定しています。 公式Apple docs この例をリスト：
<link rel="Apple-touch-startup-image" href="/launch.png">
…（少なくともiOS 12.1の時点では）oneイメージでは不十分であり、動作しないため、誤解を招く恐れがあります。代わりに、Safariは解像度ごとに1つの画像を想定しています。
スプラッシュ画面が表示されない、または正しくない場合、読み込み時に白い画面が表示され、プロに見えず、（Web）アプリの動作が遅くなります。
スプラッシュスクリーンの生成
Apple-touch-startup-image generatorsがありますが、壊れているか、Landscapeを完全に無視しており、それらの命名規則はすべてではありませんそのニース。これは簡単です。
logo.pngファイルとを含むディレクトリでbashで次のコマンドを実行すると、Safariが期待する20枚の画像が生成されます（10の解像度、それぞれのポートレートと風景）：
array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "${array[@]}"
do
split=(${i//x/ })
portrait=$i
landscape=${split[1]}x${split[0]}
gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${portrait} splash-portrait-${portrait}.png
gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${landscape} splash-landscape-${landscape}.png
done
これは GraphicsMagick に依存しており、ImageMagickのより良い代替手段です。 （macOSでは、brewを使用すると、brew install graphicsmagickと同じくらい簡単にインストールできます。
Markup
20個すべてのファイルのHTMLマークアップは次のとおりです。
<!--
# SPLASH SCREENS FOR iOS.
#
# If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
# and makes the (web)app feel slow.
#
# Constraints:
# - Cannot use a single image for all.
# - The size of the image must fit that of the targeted device, else no splash screen will show.
# - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
# Bottom-line: you need one splash screen per resolution and orientation.
#
#
# List of devices and resolutions (AUG-2019):
#
# Device Portrait size Landscape size Screen size Pixel ratio
# iPhone SE 640px × 1136px 1136px × 640px 320px × 568px 2
# iPhone 8 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 7 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone 6s 750px × 1334px 1334px × 750px 375px × 667px 2
# iPhone XR 828px × 1792px 1792px × 828px 414px × 896px 2
# iPhone XS 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone X 1125px × 2436px 2436px × 1125px 375px × 812px 3
# iPhone 8 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 7 Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone 6s Plus 1242px × 2208px 2208px × 1242px 414px × 736px 3
# iPhone XS Max 1242px × 2688px 2688px × 1242px 414px × 896px 3
# 9.7" iPad 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 7.9" iPad mini 4 1536px × 2048px 2048px × 1536px 768px × 1024px 2
# 10.5" iPad Pro 1668px × 2224px 2224px × 1668px 834px × 1112px 2
# 11" iPad Pro 1668px × 2388px 2388px × 1668px 834px × 1194px 2
# 12.9" iPad Pro 2048px × 2732px 2732px × 2048px 1024px × 1366px 2
#
# Sources:
# - Device and resolutions (Portrait size, Landscape size) from https://developer.Apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
# - Screen width as measured by JavaScript's `screen.width` and `screen.height` in Simulator, except for:
# - 7.9" iPad mini 4 (not in Simulator): https://developer.Apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
# - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
#
#
# Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
# iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
# iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
# iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
# iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
# Everything worked fine (splash screen showing in every single case.)
#
# FYI:
# - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
# - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
# WOULDDO Test on a real iPad.
-->
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="Apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
（個人的には、コメントをTwigコメントブロックに入れているので、クライアントのテキストを過度に汚染することなく情報を保持できます。）
オンラインで見たいくつかの例ではmin-device-*を使用しましたが、Safariが（ほぼ）正確な寸法の写真を想定しているため、このコンテキストではほとんど意味がありません。
私が見た他のいくつかの例は、より短い画像を使用しました（40または60px短い、つまりステータスバーなし）。 iOSの古いバージョンではこのようなサイズが予想されていたようですが、これは事実ではありません。
別れの考え
iOSユーザーの96％はiOS 12.xを使用しているため、ありがたいことに、古いiOSバージョンを気にする必要はありません。しかし、私が何かを見逃した場合、私に知らせてください。
Androidは、大きな男の子のように、スプラッシュスクリーンの一部としてアプリのアイコンを表示するのに満足していますが、iOSとSafariは、この余分な作業をすべて強制します。シンプルなスプラッシュスクリーンを表示する20枚の画像！狂ってる！物事might将来的には良くなりますが、それは今のところです。
この基本的なタスクには、多くのコーディングとテストが必要でした。私はそれが誰かを助けることを願っています。
これをより新しい解像度で更新してくださいコメントがない場合は、コメントを投稿してください。