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

Question

J'ai écrit un basé sur le HTML5 iOS de l'application web et tout semble bien fonctionner, mais je suis en train de polir avec de multiples écrans de démarrage. L'iPhone/iPod touch fonctionne bien w/PNG de 320x460, comme suit:

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

J'ai trouvé beaucoup de documentation qui dit que le démarrage des images pour l'iPad devrait, à l'instar de l'iPhone/iPod touch, ont la 20px rasé de la hauteur afin de s'adapter à la barre d'état indiquant les résolutions de 768x1004 (portrait) ou 1024x748 (paysage). Cependant, lors de mes tests (actuellement, w/un iPad exécutant iOS 3.2.2), seul le 768x1004 (portrait) résolution fonctionne (mais est incorrect-20px trop étroit quand en mode paysage).

J'ai essayé de la suite (un sauvage deviner basé sur les fonctionnalités de l' apple-touch-icon liens), 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" />

Seul le 768x1004 la résolution de l'image fonctionne si c'est le dernier link de l'élément de liste. Si le 1024x748 résolution de l'image est la dernière, sur un fond gris est rendue à sa place (mais jamais le 768x1004). Alors, évidemment, l' apple-touch-startup-image link ne prend pas en charge l' sizes d'attribut.

Est-ce pris en charge dans les plus récentes versions de l'iOS? Est-il possible de prendre en charge plusieurs de démarrage des images? Dois-je créer un 1024x768 image de démarrage? Si oui, c'est d'être revus à la baisse pour l'iPhone/iPod touch? Ou, devrais-je abandonner et ne pas avoir une image de démarrage pour l'iPad?

Answer 1

solution définitive pour les images de démarrage et les 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">
 

Answer 2

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 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.

Answer 3

Je voulais juste offrir une combinaison de réponses que effectivement travaillées. Nous avons trouvé avec la réponse qui a été sélectionnée, la rétine versions de démarrage des images n'étaient pas utilisés. Pavel réponse fixe la rétine version pour l'iPad. Ce qui suit a été testé sur iPhone (de la Rétine et de la non-retina) et iPad (retina et non-retina).

<!-- 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 pas prendre le crédit pour tout cela, mais cette configuration fonctionne. Il suffit de copier et coller, assurez-vous de faire les images exactement la taille de la dictée, en leurs noms.

Answer 4

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.

Answer 5

La solution la plus complète et essentielle: https://gist.github.com/tfausak/2222823