iphone - Was sind die richtigen Pixelabmessungen für einen Apfel?

Translate

Ich bin mir nicht sicher, wie groß die richtige Größe sein soll.

Viele Websites scheinen zu wiederholen, dass das Apple-Touch-Symbol 57 x 57 Pixel groß sein sollte, geben jedoch einen defekten Link als Quelle an.

HanselmanundSpielplatzblauIn den Kommentaren werden verschiedene Größen vorgeschlagen, darunter 163 x 163 und 60 x 60.

Apples eigeneApple.com-Symbolist 129x129!

Siehe meine verwandte Frage:Wie gebe ich meinen Websites ein Symbol für das iPhone?

This question and all comments follow the "Attribution Required."

Alle Antworten

Translate

Es scheint, dass die Apple-Richtlinien ab dem 3. August 2010 die Bilder mit "hoher Auflösung" (für iPhone 4) in den "erforderlichen" Symbolgrößen enthalten.

Sieht so aus, als müssten wir jetzt sowohl ein 57x57- als auch ein 114x114-Bild sowie ein 640x960-Titelbild bereitstellen.

SehenRichtlinien für die Erstellung benutzerdefinierter Symbole und Bilder(Javascript erforderlich), das Teil eines ganzen Dokuments ist:

Quelle
Translate

Aus dem Google-Cache vonApple Developer Connection - Web Apps Dev Center - Entwerfen von Inhalten...

Erstellen Sie ein Webclip-Lesezeichensymbol

Mit iPhone und iPod touch kann ein Benutzer ein Webclip-Lesezeichen auf seiner Website auf seinem Startbildschirm speichern.

Um ein Lesezeichensymbol für alle Seiten einer Website anzugeben, platzieren Sie ein PNG-Bild mit dem Namen "apple-touch-icon.png" im Stammverzeichnis Ihres Webservers - ähnlich wie bei "favicon.ico" für Websitesymbole.

Fügen Sie ein <link> -Element ähnlich dem <link rel = "apple-touch-icon" href = "/ customIcon.png" /> in das <head> -Element der Seite ein, um das Site-Lesezeichen-Symbol auf einer bestimmten Webseite zu überschreiben .

Die Abmessungen des Lesezeichensymbols sollten 57 x 57 Pixel betragen. Wenn das Symbol eine andere Größe hat, wird es skaliert und passend zugeschnitten.

Safari setzt das Symbol automatisch mit dem Standard-Overlay "Glas" zusammen, sodass es wie eine integrierte iPhone- oder iPod-Anwendung aussieht.

Quelle
Translate

Abhängig davon, wie viele Details es haben soll, muss es ein Seitenverhältnis von 1: 1 haben (im Grunde genommen - es muss quadratisch sein).

Ich würde mit dem Apple eigenen 129 * 129 gehen

Quelle
Translate

Ich kann keine Quelle für diese Größen angeben, da die offizielle Referenz unter Verschluss von ADC steht.

Viele der Nicht-NDA-Sites enthalten jedoch Tutorials zum Erstellen der Symbole. Zum Beispiel hier:

Quelle
Translate

Apple hat im Rahmen seines Safari Web Content Guide eine öffentlich zugängliche Seite mit dem Namen "Angeben eines Webseiten-Symbols für den Webclip"(Javascript erforderlich), das alle Resolutionen und deren Umsetzung abdeckt.

Quelle
Translate

Die offizielle Größe ist 57x57. Ich würde empfehlen, die genaue Größe zu verwenden, da beim Laden weniger Speicher benötigt wird (es sei denn, Apple speichert die skalierte Darstellung zwischen). Nachdem das gesagt worden ist,Rex hat rechtdass jede quadratische Größe funktioniert

Quelle
Translate

Apple-SpezifikationenGeben Sie neue Größen für iOS7 an:

  • 60x60
  • 76 x 76
  • 120 x 120
  • 152 x 152

Während alte Größen für iOS6 und früher sind:

  • 57 x 57
  • 72x72
  • 114 x 114
  • 144 x 144

Übrigens sind vorkompositionierte Symbole veraltet.

Folglich müssen diese 8 Bilder vorhanden sein, um neue Geräte (mit iOS7) und ältere (iOS6 und frühere) zu unterstützen, und der generische Code lautet:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Und dazu,Sie sollten ein 152x152-Bild mit dem Namen erstellenapple-touch-icon.png.

Vielleicht möchten Sie das wissenFavicon Generatorkann alle diese Bilder auf einmal erzeugen. Vollständige Offenlegung: Ich bin der Autor dieser Website.

Quelle
Translate

Ich glaube nicht, dass es eine "richtige Größe" gibt. Da auf dem iPhone wirklich OSX ausgeführt wird, ist das Symbol-Rendering-System ziemlich robust. Solange Sie ein qualitativ hochwertiges Bild mit dem richtigen Seitenverhältnis und einer Auflösung liefern, die mindestens so hoch ist wie die tatsächliche Ausgabe, wird das Betriebssystem sehr sauber verkleinert. Meine Website verwendet eine Größe von 158 x 158 und das Symbol sieht auf dem iPhone-Bildschirm pixelgenau aus.

Quelle
Translate

Der Link von NilObject führte mich zu dem großartigen Blog-BeitragCatchup auf Ihrem Iconbeimmakentosh.com

... Natürlich musste all diese Inkonsistenz irgendwann behoben werden, oder? Nun, 2.0 hat sich gut damit befasst! Schließlich bedeutete 57x57 tatsächlich 57x57.

... jedes Pixel ... perfekt gerendert.

Quelle
Translate

Sie müssen sich nicht mehr um die richtige Größe kümmern. Wenn Sie eine iTunes-Grafikdatei (dh eine Datei mit einer Größe von 1024 * 1024) Ihres Symbols haben, habe ich diese Anwendung erstellt, die Ihnen alle Symbole basierend auf den bereitgestellten Informationen bereitstelltHier. Bekommen dasBewerbung von hierBefolgen Sie die Anweisungen in der Readme-Datei, um alle erforderlichen Symbole für die iOS-Anwendung zu erstellen.

Quelle
Translate

Aktualisierte Liste Oktober 2014, iOS8

Liste für iPhone und iPad mit und ohne Netzhaut

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Update 2014 iOS 8:

Für iOS 8 und Iphone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Das iPhone 6 verwendet dasselbe 120 x 120 Pixel große Bild wie das iPhone 4 und 5, der Rest ist das gleiche wie für iOS 7

Update 2013 iOS7:

Für iOS 7 wurden die empfohlenen Auflösungen geändert:

  • für iPhone Retina von 114 x 114 px bis 120 x 120 px
  • für iPad Retina von 144 x 144 px bis 152 x 152 px

Die andere Auflösung ist immer noch die gleiche

  • 57 x 57 px Standard
  • 76 x 76 px für iPads ohne Netzhaut
Quelle