webentwicklung-frage-antwort-db.com.de

Mehrere "Apple-Touch-Startup-Images" für iOS-Web-Apps (va für iPad)?

Ich habe eine HTML5-basierte iOS-Webanwendung geschrieben, und alles scheint gut zu funktionieren, aber ich versuche, es mit mehreren Startbildschirmen zu verbessern. Das iPhone/iPod touch funktioniert mit einem PNG von 320x460 wie folgt:

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

Ich habe eine Menge Dokumentation gefunden, die besagt, dass die Startup-Images für das iPad, wie das iPhone/iPod touch, die 20px von der Höhe abschneiden sollen, um die Statusleiste unterzubringen, die Auflösungen von 768x1004 (Hochformat) oder 1024x748 (Querformat) bietet. In meinen Tests (derzeit mit einem iPad mit iOS 3.2.2) funktioniert jedoch nur die Auflösung von 768x1004 (Hochformat) (ist jedoch falsch (20px zu eng), wenn Sie im Querformatmodus arbeiten).

Ich habe folgendes versucht (eine wilde Vermutung basierend auf der Funktionalität der Apple-touch-icon-Links), ohne Erfolg:

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

Nur das Bild mit einer Auflösung von 768 x 1004 funktioniert, wenn es das letzte aufgelistete link-Element ist. Wenn das Bild mit einer Auflösung von 1024x748 das letzte Mal ist, wird ein grauer Hintergrund an seiner Stelle gerendert (aber niemals der 768x1004). Offensichtlich unterstützt die Apple-touch-startup-imagelink das sizes-Attribut nicht.

Wird dies in neueren Versionen von iOS unterstützt? Gibt es eine Möglichkeit, mehrere Startup-Images zu unterstützen? Soll ich ein 1024x768-Startup-Image erstellen? Wenn ja, wird das iPhone/iPod touch verkleinert? Oder sollte ich einfach aufgeben und kein Startbild für das iPad haben?

57
morgant

endgültige Lösung für Startbild und Touch-Icons für iPad und iPhone (Querformat || Porträt) und (Retina || nicht):

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

Ich wollte nur eine Kombination von Antworten anbieten, die tatsächlich funktioniert hat. Mit der ausgewählten Antwort haben wir festgestellt, dass die Retina-Versionen der Splash-Images nicht verwendet wurden. Die Antwort von Pavel fixierte die Retina-Version für das iPad. Folgendes wurde auf iPhone (Retina und Nicht-Retina) und iPad (Retina und Nicht-Retina) getestet.

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

Ich kann mir das nicht anrechnen, aber diese Konfiguration funktioniert. Einfach kopieren und einfügen, stellen Sie sicher, dass die Bilder genau die Größe haben, die in ihren Namen vorgegeben ist.

18
Chris

Ich habe es tatsächlich im Querformat arbeiten lassen. Ich habe die Informationen hier: https://Gist.github.com/472519 .

Das Problem ist, dass das Landschaftsbild 748 x 1024 (ein Querformat seitwärts, ich im Uhrzeigersinn gedreht) anstelle von 1024 x 748 sein muss.

Ich musste die App zuerst im Hochformat und dann im Querformat starten.

18
derickito

Wenn bei einem Linkelement ein Medieneigentum fehlte, funktionierten die Dinge für mich nicht. Der Code zeigte erfolgreich ein Startbild auf einem iPhone 3G und iPad an (Hoch- und Querformat) .

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

Konnte es nicht mit dem iPhone4 versuchen (hochauflösend), aber höchstwahrscheinlich funktioniert es genauso.

13
Cagey

Die umfassendste Gist-Lösung: https://Gist.github.com/tfausak/2222823

3
MPaulo

Ich habe einige Zeit damit verbracht, herauszufinden, wie man einen Startbildschirm für das neue iPad (Retina) erstellt. Hier ist meine getestete und funktionierende Lösung für beide Richtungen des neuen iPad (Retina).

P.S. Bevor ich dies poste, habe ich bereits Lösungen getestet und sie haben nicht funktioniert.

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

Anscheinend funktioniert der Startbildschirm nur unter den folgenden Bedingungen

1) muss genau die vom Gerät geforderte Größe sein 2) Das Gerät muss sich beim Hochfahren der App im Hochformat befinden. 3) Einige Quellen sagen nur png, aber jpg scheint jetzt zu funktionieren.

2
Hamilton Meyer

ich habe viele Male getestet, jetzt ist es sicher, dass es funktioniert, wenn Sie sich wie folgt verhalten: Halten Sie Ihr Pad zunächst im Hochformat, öffnen Sie die App, und halten Sie dann die App im Querformat, öffnen Sie die App. saugt aber ... scheint dies der einzige Weg zu sein. Sie müssen zuerst Ihr Pad-Portrait halten, um den Fehler zu "entsperren".

1
norman

Dies mag für einige offensichtlich sein, aber das Startbild würde für mich nicht funktionieren, wenn ich nicht hinzufügte, dass ich eine Verknüpfung zum Startbildschirm hinzugefügt, von dort aus ausgeführt habe und folgenden Code hatte: 

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

Diese Seite war hilfreich, um dies herauszufinden: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

1
muzzamo

iPhone 6 und iPhone 6+ 

 <link href = "launch6.png" media = "(Gerätebreite: 375px)" rel = "Apple-Touch-Startup-Image"> 
 <link href = "launch6plus.png" media = " (Gerätebreite: 414px) "rel =" Apple-Touch-Startup-Image "> 

Über diesen Link: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

1
SemanticZen

So konnte ich auf dem iPhone/iPad/iPhoneRetina 4 individuelle Startbilder für WebApps abrufen. Das war eine Kombination aus ein paar Dingen ...

Nicht-Retina-iPhone (320x460):

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

Retina iPhone (4 & 4S) (640x920): Verwenden Sie die oben beschriebene Javascript-Technik. http://www.paulofierro.com/archives/568/

iPad (beide Ausrichtungen) ist schwierig. Die Landschaft muss 748 x 1024h groß sein, wobei "bottom" die linke Seite ist. Das Portrait muss 768 x 1004h sein, wobei "bottom" der untere Wert ist. Ich musste die iPad-Tags über PHP einschließen, indem ich das iPad im Benutzeragenten erkannte. Andernfalls würde das Nicht-Retina-iPhone-Startbild nicht geladen. Hier ist der 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 } ?>

Wenn Sie dies tun, kann meine WebApp (eigentlich eine einfache WordPress-Blog-Site, die zurzeit offline daran arbeitet) ein Startup-Image für iPhone, Retina und beide iPad-Orientierungen haben. Getestet auf iPhone 3G mit aktuellem iOS 4, iPad und iPhone 4, beide mit aktuellem iOS 5.

Selbstverständlich können Sie den iPad-Code auch über Javascript einfügen. lol

1
Rob

Komplette Meta:

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

Wenn Sie das Retina-Display anvisieren möchten, habe ich hier eine Lösung gefunden und gebloggt: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web- apps-retina-displays-auch-welcome

Grundsätzlich funktionieren die Größeneigenschaften- und Medienabfragen nicht. Nachdem Sie Ihre Seite geladen haben, müssen Sie das hochauflösende Startbild über JavaScript einfügen. Hacky aber funktioniert.

0
Paulo Fierro

Diese Antwort bietet eine bequeme Möglichkeit, alle 20 Begrüßungsbildschirme zu generieren, die derzeit von iOS benötigt werden + aktuelles HTML-Markup für iOS 12.1.

Dies beinhaltet Lösungen für iPhone XR, iPhone XS Max und 11 "iPad Pro

Kontext

Safari unter iOS unterstützt jetzt Progressive Web Apps, implementiert diese jedoch anders als Chrome. Es liest die Datei manifest, ignoriert jedoch die darin deklarierten Symbole.

Stattdessen erwartet Safari eine Liste von Apple-touch-startup-image Tags. Während die offiziellen Apple Dokumente dieses Beispiel auflisten:

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

… Es ist irreführend, weil (zumindest ab iOS 12.1) ein Bild nicht ausreicht und nicht funktioniert. Safari erwartet stattdessen ein Bild pro Auflösung.

Wenn der Begrüßungsbildschirm fehlt oder falsch ist ​​Beim Laden wird ein weißer Bildschirm angezeigt, der unprofessionell aussieht und die (Web-) App sich langsam anfühlt.


Erstellen der Begrüßungsbildschirme

Es gibt Apple-Touch-Startup-Image-Generatoren , aber sie sind entweder kaputt oder ignorieren Landscape insgesamt, und ihre Namenskonventionen sind nicht allzu schön . Das ist einfacher.

Führen Sie den folgenden Befehl in bash in einem Verzeichnis aus, das eine logo.png -Datei enthält, und erzeugt die von Safari erwarteten 20 Bilder (jeweils zehn Auflösungen für Hoch- und Querformat):

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

Dies basiert auf GraphicsMagick , einer besseren Alternative zu ImageMagick. (Unter macOS ist die Installation mit brew so einfach wie mit brew install graphicsmagick.

Markup

Hier ist das HTML-Markup für alle 20 Dateien:

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

(Ich persönlich behalte die Kommentare in einem Twig -Kommentarblock, damit ich die Informationen behalten kann, ohne die des Kunden mit zu viel Text zu verschmutzen.)

Einige Beispiele, die ich online gesehen habe, verwendeten min-device-*, aber dies ist in diesem Zusammenhang wenig sinnvoll, da Safari Bilder in (nahezu) exakten Maßen erwartet.

In einigen anderen Beispielen wurden kürzere Bilder verwendet (40 oder 60 Pixel kürzer, d. H. Ohne Statusleiste). Ältere Versionen von iOS scheinen solche Dimensionen erwartet zu haben, dies ist jedoch nicht mehr der Fall.


Abschiedsgedanken

96% meiner iOS-Benutzer verwenden iOS 12.x. Zum Glück müssen Sie sich also nicht zu sehr um ältere iOS-Versionen kümmern. Aber wenn ich etwas verpasst habe, lass es mich bitte wissen.

Während Android wie ein großer Junge gerne das Symbol der App als Teil des Begrüßungsbildschirms anzeigt, erzwingen iOS und Safari diese zusätzliche Arbeit. 20 Bilder für einen einfachen Begrüßungsbildschirm! Das ist verrückt! Die Dinge könnten in Zukunft besser werden, aber so ist es jetzt.

Diese elementare Aufgabe erforderte viel Codieren und Testen. Ich hoffe es hilft jemandem.

Ich werde versuchen, mit neueren Auflösungen auf dem neuesten Stand zu halten . Bitte schreibe einen Kommentar, wenn einer fehlt.

0