webdevqa.jp.net

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の起動イメージを持っていないほうがいいですか?

58
morgant

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" />
77
Marco Allori

実際に機能する回答の組み合わせを提供したかっただけです。選択された答えで、スプラッシュ画像の網膜バージョンは使用されていませんでした。 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" />

私はこれを信用することはできませんが、この構成は機能します。コピーして貼り付け、画像の名前が正確に指定されているサイズになるようにしてください。

18
Chris

実際に、ランドスケープモードで動作するようにしました。私はここで情報を得ました: https://Gist.github.com/472519

問題は、1024x748ではなく、横長の画像が748x1024(横長の横長画像、時計回りに回転)でなければならないことです。

また、最初にアプリをポートレートモードで起動し、次にランドスケープモードで起動する必要がありました。

18
derickito

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(高解像度)を試すことはできませんでしたが、おそらく同じように機能します。

13
Cagey

最も完全なGistソリューション: https://Gist.github.com/tfausak/222282

3
MPaulo

どうやらスタートアップ画面は次の条件でのみ機能します

1)デバイスに必要な正確なサイズでなければなりません。 2)アプリを起動するとき、デバイスは縦向きでなければなりません。 3)いくつかの情報源はpngのみと言っていますが、jpgは現在動作しているようです。

3
Hamilton Meyer

新しい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" />
2
Pavel Kostenko

これは一部の人には明らかかもしれませんが、ホーム画面にショートカットを追加してそこから実行し、次のコードを追加しない限り、スタートアップイメージは機能しません。

<meta name="Apple-mobile-web-app-capable" content="yes" /> 

このページは、このすべてを理解するのに役立ちました: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

2
muzzamo

私は何度もテストしましたが、今はこのように動作するときに動作すると確信しています:最初にパッドを縦向きにして、アプリを開いてから、アプリを横向きにして、アプリを開きます。吸いますが...これがそれを作る唯一の方法のようです。バグを「ロック解除」するには、まずパッドのポートレートを保持する必要があります。

1
norman

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

1
SemanticZen

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コードを含めることもできます。笑

1
Rob

完全なメタ:

<!-- 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">
1

網膜ディスプレイをターゲットにしたい場合は、解決策を見つけて、ブログでここにブログを書きました: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios- web-apps-retina-displays-also-welcome

基本的に、サイズプロパティとメディアクエリは機能しません。ページが読み込まれたら、JavaScriptを使用して高解像度の起動画像を挿入する必要があります。ハッキーだが動作する。

0
Paulo Fierro

この回答は、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将来的には良くなりますが、それは今のところです。

この基本的なタスクには、多くのコーディングとテストが必要でした。私はそれが誰かを助けることを願っています。

これをより新しい解像度で更新してくださいコメントがない場合は、コメントを投稿してください。

0