質問: 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-image linkは、sizes属性をサポートしていません。これはiosの新しいバージョンでサポートされていますか?複数のスタートアップイメージをサポートする方法はありますか? 1024x768のスタートアップイメージを作成する必要がありますか?その場合、iphone/ipod touchの場合は縮小されますか?または、あきらめて、ipadの起動イメージを持っていないほうがいいですか?
回答: この回答は、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と同じくらい簡単にインストールできます。markup20個すべてのファイルの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将来的には良くなりますが、それは今のところです。この基本的なタスクには、多くのコーディングとテストが必要でした。私はそれが誰かを助けることを願っています。これをより新しい解像度で更新してくださいコメントがない場合は、コメントを投稿してください。