Plusieurs résolutions "Apple-touch-startup-image" pour l'application Web iOS (en particulier pour iPad)?

Question

J'ai écrit une application Web iOS au format HTML5 et tout semble bien fonctionner, mais j'essaie de la peaufiner avec plusieurs écrans de démarrage. L'iPhone/iPod touch fonctionne bien avec un PNG de 320x460, comme suit:

<link rel="Apple-touch-startup-image" href="img/startup_screen-320x460.png" />

J'ai trouvé de nombreux documents indiquant que les images de démarrage pour l'iPad devraient, comme l'iPhone/iPod touch, avoir rasé 20 pixels de hauteur afin de permettre à la barre d'état de donner une résolution de 768x1004 (portrait) ou 1024x748 (paysage). Cependant, lors de mes tests (actuellement avec un iPad sous iOS 3.2.2), seule la résolution 768x1004 (portrait) fonctionnait (mais elle est incorrecte (20 pixels de trop, en mode paysage).

J'ai essayé ce qui suit (une folle estimation basée sur la fonctionnalité des liens Apple-touch-icon), mais en vain:

<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" />

Seule l’image de résolution 768x1004 fonctionne s’il s’agit du dernier élément link de la liste. Si l'image de résolution 1024x748 est la dernière, un fond gris est rendu à sa place (mais jamais le 768x1004). Donc, évidemment, Apple-touch-startup-image link ne prend pas en charge l'attribut sizes.

Est-ce que cela est supporté dans les nouvelles versions d'iOS? Est-il possible de prendre en charge plusieurs images de démarrage? Devrais-je créer une image de démarrage 1024x768? Si oui, sera-t-il réduit pour l'iPhone/iPod touch? Ou devrais-je simplement abandonner et ne pas avoir d'image de démarrage pour l'iPad?

Marconi · Answer

solution définitive pour image-démarrage et icônes tactiles pour iPad et iPhone (paysage || portrait) et (rétine || non):

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

Chris · Answer

Je voulais juste offrir une combinaison de réponses qui a réellement fonctionné. Nous avons trouvé avec la réponse sélectionnée que les versions de la rétine des images de démarrage n'étaient pas utilisées. La réponse de Pavel a corrigé la version Retina pour l'iPad. Ce qui suit a été testé sur iPhone (rétine et non rétine) et iPad (rétine et non rétine).

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

Je ne peux prendre aucun crédit pour cela, mais cette configuration fonctionne. Il suffit de copier et coller, assurez-vous de faire les images exactement la taille dictée dans leurs noms.

derickito · Answer

Je l'ai réellement fait fonctionner en mode paysage. J'ai eu l'info ici: https://Gist.github.com/472519 .

Le problème est que l'image de paysage doit être au format 748x1024 (une image de paysage de côté, j'ai pivoté dans le sens des aiguilles d'une montre) au lieu de 1024x748.

J'ai également dû lancer l'application en mode portrait d'abord, puis en mode paysage.

Cagey · Answer

Si un élément de lien manquait, une propriété de média ne fonctionnait pas pour moi. Le code affichait avec succès une image de lancement sur un iPhone 3G et un iPad (mode portrait et paysage) .

<-- 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)" />

Impossible d'essayer l'iPhone4 (haute résolution), mais cela fonctionne probablement de la même manière.

MPaulo · Answer

La solution Gist la plus complète: https://Gist.github.com/tfausak/2222823

Pavel Kostenko · Answer

Après avoir passé du temps à comprendre comment créer un écran de démarrage pour le nouvel iPad (Retina), voici ma solution testée et opérationnelle pour l'orientation du nouvel iPad (Retina).

P.S. avant de poster ceci, j'ai déjà testé des solutions et elles n'ont pas fonctionné.

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

Hamilton Meyer · Answer

Apparemment, l'écran de démarrage ne fonctionne que dans les conditions suivantes

1) doit avoir exactement la taille requise par l'appareil . 2) l'appareil doit être en orientation portrait lors du lancement de l'application . 3) Certaines sources disent seulement png mais jpg semble fonctionner maintenant.

norman · Answer

j'ai testé plusieurs fois, maintenant je suis sûr que cela fonctionne lorsque vous agissez comme ceci: maintenez d'abord votre pad de manière portrait, ouvrez votre application, puis maintenez votre application de manière paysage, ouvrez-vous. C'est nul mais ... semble que c'est la seule façon de le faire. vous devez d'abord tenir votre portrait de pad pour "déverrouiller" le bogue.

muzzamo · Answer

Cela peut sembler évident à certains, mais l’image de démarrage ne fonctionnera pas pour moi si je n’ajoute pas un raccourci à l’écran d’accueil, le lance à partir de là et le code suivant:

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

Cette page était utile pour comprendre tout cela: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

SemanticZen · Answer

iPhone 6 et iPhone 6+

 <link href = "launch6.png" media = "(largeur du périphérique: 375px)" rel = "image de démarrage Apple-touch">.. (device-width: 414px) "rel =" Apple-touch-startup-image ">

A partir de ce lien: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

Rob · Answer

La façon dont j'ai pu obtenir 4 images de démarrage individuelles pour WebApps sur iPhone/iPad/iPhoneRetina était une combinaison de quelques éléments ...

IPhone non rétine (320x460):

 <link rel="Apple-touch-startup-image" href="startup-iphone.jpg" />

Retina iPhone (4 & 4S) (640x920): Utilisez la technique Javascript indiquée ci-dessus. http://www.paulofierro.com/archives/568/

iPad (les deux orientations) est délicat. Le paysage doit faire 748w x 1024h, le "bas" étant le côté gauche. Le portrait doit faire 768w x 1004h, le "bas" étant le bas. J'ai dû inclure les balises iPad via PHP en détectant l'iPad dans l'agent d'utilisateur, sinon l'image de démarrage de l'iPhone non rétine ne se chargerait pas. Voici le code ...

 <?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 } ?>

Faire ce qui précède permet à mon application Web (en réalité un site de blog wordpress simple, travaillant actuellement hors connexion) d'avoir une image de démarrage pour iPhone, Retina et les deux orientations de l'iPad. Testé sur iPhone 3G sous iOS 4, iPad et iPhone 4 sous iOS 5.

Bien sûr, vous pouvez également inclure le code iPad via javascript. lol

Giovanni Brescia · Answer

Méta complète:

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

Paulo Fierro · Answer

Si vous voulez cibler l'affichage de la rétine, j'ai trouvé une solution et blogué à ce sujet ici: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web- apps-retina-displays-also-welcome

Fondamentalement, la propriété de tailles et les requêtes multimédia ne fonctionneront pas. Une fois votre page chargée, vous devez injecter l’image de démarrage haute résolution via JavaScript. Hacky mais fonctionne.

Fabien Snauwaert · Answer

Cette réponse est un moyen pratique de générer les 20 écrans de démarrage actuellement requis par iOS + balisage HTML à jour pour iOS 12.1 .

Cela inclut des solutions pour iPhone XR, iPhone XS Max et iPad 11 "

Le contexte

Safari sur iOS prend désormais en charge les applications Web progressives, mais l'implémente différemment de Chrome. Il lit le fichier manifest, mais ignore les icônes qui y sont déclarées.

Au lieu de cela, Safari attend une liste de balises Apple-touch-startup-image. While la documentation officielle Apple répertorie cet exemple:

<link rel="Apple-touch-startup-image" href="/launch.png">

… C'est trompeur, car (au moins à partir de iOS 12.1), one l'image n'est pas suffisante et ne fonctionnera pas. Au lieu de cela, Safari attend une image par résolution.

Si l'écran de démarrage est manquant ou incorrect, , un écran blanc s'affiche au chargement, ce qui ne semble pas professionnel et rendait l'application (Web) lente.

Générer les écrans de démarrage

Il y a générateurs d'images Apple-touch-startup en ligne mais ils sont soit en panne, soit en ignorant Paysage. tout à fait, et leurs conventions de nommage ne sont pas tout ce que Nice. C'est plus facile.

Exécutez la commande suivante dans bash dans un répertoire contenant un fichier logo.png et , qui produira les 20 images attendues par Safari (dix résolutions, par exemple). Portrait et Paysage):

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

Cela repose sur GraphicsMagick , une meilleure alternative à ImageMagick. (Sur macOS, avec Brew, il est aussi facile à installer que brew install graphicsmagick.

Markup

Voici le balisage HTML pour les 20 fichiers:

<!-- # 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)">

(Personnellement, je conserve les commentaires dans un bloc de commentaires Twig afin que je puisse conserver les informations sans polluer le client avec trop de texte.)

Certains exemples que j'ai vus en ligne utilisaient min-device-*, mais cela n’a guère de sens dans ce contexte étant donné que Safari attend des images dans des dimensions (presque) exactes.

Certains autres exemples que j'ai vus utilisaient des images plus courtes (40 ou 60 pixels de moins, c'est-à-dire sans la barre d'état). Les anciennes versions d'iOS semblent avoir prévu de telles dimensions, mais ce n'est plus le cas.

Pensées de séparation

96% de mes utilisateurs iOS utilisent iOS 12.x, alors heureusement, inutile de trop se préoccuper des anciennes versions iOS. Mais si j'ai manqué quelque chose s'il vous plaît faites le moi savoir.

Alors qu'Android, comme un grand garçon, est heureux de montrer l'icône de l'application dans le cadre de l'écran de démarrage, iOS et Safari nous forcent à faire tout ce travail supplémentaire. 20 images pour montrer un simple écran de démarrage! C'est fou! Things pourrait s'améliorer à l'avenir, mais c'est comme ça pour l'instant.

Cette tâche élémentaire a nécessité beaucoup de codage et de test. J'espère que ça va aider quelqu'un.

Je vais essayer de garder cette mise à jour avec les nouvelles résolutions . S'il vous plaît poster un commentaire s'il en manque un.