Vraag Meerdere "Apple-touch-startup-image" -resoluties voor iOS-webapp (vooral voor iPad)?


Ik heb een HTML5-gebaseerde iOS-webtoepassing geschreven en alles lijkt goed te werken, maar ik probeer het op te poetsen met meerdere opstartschermen. De iPhone / iPod touch werkt goed met een PNG van 320x460, als volgt:

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

Ik vond een overvloed aan documentatie die zegt dat de opstartbeelden voor de iPad, zoals de iPhone / iPod touch, de 20px geschoren moeten hebben van de hoogte om plaats te bieden aan de statusbalk met resoluties van 768x1004 (portret) of 1024x748 (liggend). In mijn testen (momenteel met een iPad met iOS 3.2.2) werkt echter alleen de 768x1004 (portret) resolutie (maar is onjuist -20px te smal) in de liggende modus).

Ik heb het volgende geprobeerd (een wilde schatting op basis van de functionaliteit van de apple-touch-icon links), zonder resultaat:

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

Alleen de resolutie van 768 x 1004 met resolutie werkt als dit de laatste is link element vermeld. Als de resolutie van 1024x748 het laatst is, wordt er in plaats daarvan een grijze achtergrond weergegeven (maar nooit de 768x1004). Dus, natuurlijk het apple-touch-startup-image  link ondersteunt de sizes attribuut.

Wordt dit ondersteund in nieuwere versies van de iOS? Is er een manier om meerdere startup-afbeeldingen te ondersteunen? Moet ik een opstartafbeelding van 1024x768 maken? Als dat zo is, wordt de wil verkleind voor de iPhone / iPod touch? Of moet ik gewoon opgeven en geen opstartbeeld voor de iPad hebben?


57
2018-01-14 03:23


oorsprong


antwoorden:


definitieve oplossing voor opstart afbeelding en touch-iconen voor iPad en iPhone (landschap || portret) en (netvlies || niet):

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

76
2018-04-04 13:15



Ik heb het echt laten werken in de liggende modus. Ik heb de info hier: https://gist.github.com/472519.

Het probleem is dat het landschapsbeeld 748x1024 moet zijn (een liggend beeld zijwaarts, ik roteer met de klok mee) in plaats van 1024x748.

Ik moest ook eerst de app starten in portretmodus en vervolgens liggend.


18
2018-05-20 21:51



Ik wilde gewoon een combinatie van antwoorden aanbieden die echt werkte. We vonden met het antwoord dat was geselecteerd, de retina-versies van de splash-afbeeldingen werden niet gebruikt. Pavel's antwoord bevestigde de retina-versie voor de iPad. Het volgende is getest op iPhone (Retina en niet-retina) en iPad (netvlies en niet-netvlies).

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

Ik kan dit allemaal niet in aanmerking nemen, maar deze configuratie werkt. Kopieer en plak gewoon, zorg ervoor dat de afbeeldingen precies het formaat hebben dat in hun naam is gedicteerd.


18
2018-03-20 20:10



Als er een link-element een media-eigenschap mist, werkte het niet voor mij. De code heeft met succes een startafbeelding op een iPhone 3G en iPad weergegeven (staande en liggende modus) .

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

Kon het niet proberen voor de iPhone4 (hoge resolutie) maar waarschijnlijk werkt het op dezelfde manier.


13
2017-07-05 23:54



De meest complete, logische oplossing: https://gist.github.com/tfausak/2222823


3
2018-05-02 03:00



Blijkbaar werkt het startscherm alleen onder de volgende omstandigheden

1) moet de exacte grootte zijn die door het apparaat wordt vereist. 2) het apparaat moet in de staande stand staan ​​wanneer de app wordt gestart. 3) Sommige bronnen zeggen alleen png maar jpg lijkt nu te werken.


2
2018-02-24 22:22



De manier waarop ik 4 individuele startup images voor WebApps op de iPhone / iPad / iPhoneRetina kon krijgen was een combinatie van een paar dingen ...

Niet-Retina-iPhone (320x460):

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

Retina-iPhone (4 & 4S) (640x920): gebruik de bovenstaande Javascript-techniek. http://www.paulofierro.com/archives/568/

iPad (beide oriëntaties) is lastig. Landschap moet 748 x 1024 uur zijn, met de "onderkant" als de linkerkant. Portret moet 768 x 1004 uur zijn, met de "onderkant" als onderkant. Ik moest de iPad-tags opnemen via PHP door de iPad in de User Agent te detecteren, anders zou de opstartpagina van de niet-retina-iPhone niet worden geladen. Hier is de 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 } ?>

Door het bovenstaande te doen, kan mijn webapp (eigenlijk een simpele WordPress blogsite, die er momenteel offline aan werkt) een opstartafbeelding hebben voor de iPhone, Retina en beide iPad-oriëntaties. Getest op iPhone 3G met de nieuwste iOS 4, iPad en iPhone 4, beide met de nieuwste iOS 5.

Natuurlijk kunt u de iPad-code ook opnemen via javascript. lol


1
2017-12-02 03:31



ik heb het vele malen getest, nu weet ik zeker dat het werkt wanneer je je zo gedraagt: houd je pad eerst op portretten, open je app en houd je app op een mooie manier vast, open je app. sucks but ... lijkt dit de enige manier om het te maken. je moet eerst je pad-portret vasthouden om de bug te "ontgrendelen".


1
2018-02-08 16:59



Heb wat tijd besteed aan het vinden van een splashscherm voor de nieuwe iPad (Retina), hier is mijn geteste en werkende oplossing voor zowel de oriëntatie van de nieuwe iPad (Retina).

Postscriptum voordat ik dit heb gepost heb ik al gegeven oplossingen getest en deze hebben niet gewerkt.

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

1
2017-10-10 06:58