Verwirrung bei der Auflösung des iPhone 6 Plus: Xcode oder Apples Website? zur Entwicklung


265

Laut Apples Website beträgt die Auflösung 1080p: 1920 x 1080

Der für Xcode erforderliche Startbildschirm (8.0 GM heute gestartet) ist jedoch 2208 x 1242.

Wer hat recht?

Xcode


Die Startbilder für das iPhone 6+ müssen 1242 x 2208 und 2208 x 1242 sein. Zumindest funktionieren Apps im Simulator ordnungsgemäß (und dies ist im HIG dokumentiert). Ich habe nicht herausgefunden, warum sich dies von der angenommenen physischen Bildschirmgröße von 1920 x 1080 unterscheidet.
rmaddy

2
sehr seltsame Diskrepanz.
JasonGenX


Dies kann sich in der stabilen Version von Xcode 6.1 ändern. Ist es?
Jayprakash Dubey

Antworten:


308

Das iPhone 6+ rendert intern mit @ 3x- Assets mit einer virtuellen Auflösung von 2208 × 1242 (mit 736x414 Punkten) und tastet diese dann zur Anzeige ab. Ähnlich wie bei der Verwendung einer skalierten Auflösung auf einem Retina MacBook können sie ein ganzzahliges Vielfaches für Pixel-Assets treffen, während z. B. 12-Punkt-Text auf dem Bildschirm dieselbe Größe aufweist.

Ja, die Startbildschirme müssen diese Größe haben.

Die Mathematik:

Die 6, die 5s, die 5, die 4s und die 4 sind alle 326 Pixel pro Zoll und verwenden @ 2x Assets, um die ungefähr 160 Punkte pro Zoll aller vorherigen Geräte einzuhalten.

Die 6+ beträgt 401 Pixel pro Zoll. Es würde also hypothetisch ungefähr ein 2,46-faches Vermögen benötigen. Stattdessen verwendet Apple @ 3x-Assets und skaliert die gesamte Ausgabe auf etwa 84% seiner natürlichen Größe.

In der Praxis hat Apple beschlossen, mehr als 87% zu verwenden und den 1080 in 1242 umzuwandeln. Zweifellos sollte dies so nahe wie möglich an 84% liegen, die immer noch integrale Größen in beide Richtungen hervorbrachten - 1242/1080 = 2208/1920 genau Wenn Sie den 1080 beispielsweise in 1286 verwandelt hätten, müssten Sie 2286,22 Pixel vertikal rendern, um eine gute Skalierung zu erzielen.


6
Wie haben Sie es berechnet-> "virtuelle Auflösung von 2208 × 1242 (mit 736x414 Punkten)" und dies "benötigt ungefähr @ 2,46x Assets" Was wird UIScreen mainScreen] .bounds.size.height für 6+ zurückgeben? 568, 568 * 3 (1704) oder 1920.
msk

1
Fügen Sie dieser Antwort möglicherweise einen Hinweis zu Startbildern hinzu? (siehe Hannes 'Antwort) Nützlich, um zu berücksichtigen, dass vorhandene Apps aktualisiert werden (ansonsten läuft es bei 320x576 @ 3x - ich war eine Weile verwirrt!)
Joseph Humfrey

2
@msk [UIScreen mainScreen].bounds.size.heightgibt im Hochformat 736 im iPhone 6+ Simulator zurück. Dies ist der 2208-Wert geteilt durch die Skala von 3. Die Breite beträgt 414.
rmaddy

1
Es ist nicht genau die gleiche Größe mit @ 3x mit der Auflösung 1242 * 2208, es ist 6% gestreckt.
Binarian

4
Was für ein schrecklicher Trottel! Ein systemweiter Verlust an Leistung, Speicher und Schärfe, um einige Größenanpassungen auf API-Ebene etwas einfacher zu machen! Nun, ich denke, es wird alles Sinn machen, wenn sie das iPhone 7 Plus mit einem 5,5 "461 ppi Display veröffentlichen.
sup

114

Die Antwort ist, dass ältere Apps im Zoom-Modus 2208 x 1242 ausgeführt werden. Wenn jedoch eine App für die neuen Telefone erstellt wird, stehen folgende Auflösungen zur Verfügung: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 und Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Dies führt zu der in der Frage erwähnten Verwirrung. Um Apps zu erstellen, die die Vollbildgröße der neuen Telefone verwenden, fügen Sie LaunchImages in den Größen 1125 x 2436, 1242 x 2208, 2208 x 1242 und 750 x 1334 hinzu.

Aktualisiert für die neuen iPhones 11, 11 Pro, 11 Pro max

Größe für iPhone 11 Pro Max mit @ 3x Skalierung, Koordinatenabstand: 414 x 896 Punkte und 1242 x 2688 Pixel, 458 ppi, physische Größe des Geräts beträgt 3,06 x 6,22 Zoll oder 77,8 x 158,0 mm. 6,5 "Super Retina XDR-Display.

Größe für iPhone 11 Pro mit 3-facher Skalierung, Koordinatenabstand: 375 x 812 Punkte und 1125 x 2436 Pixel, 458 ppi, physische Größe des Geräts: 71,4 x 144,0 mm (2,81 x 5,67 Zoll). 5,8 "Super Retina XDR-Display.

Größe für iPhone 11 mit 2- facher Skalierung, Koordinatenraum: 414 x 896 Punkte und 828 x 1792 Pixel, 326 ppi, physische Größe des Geräts: 75,7 x 150,9 mm (2,98 x 5,94 Zoll). 6.1 "Liquid Retina HD-Display.

Größe für iPhone X🅂 Max mit @ 3x Skalierung (Apple-Name: Super Retina HD 6.5-Display " ), Koordinatenraum: 414 x 896 Punkte und 1242 x 2688 Pixel, 458 ppi, physische Größe des Geräts beträgt 3,05 x 6,20 Zoll oder 77,4 x 157,5 mm.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 Max Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 1242.0, 2688.0), scale: 3.0

Größe für iPhone X🅁 mit @ 2x Skalierung (Apple-Name: Super Retina HD 6,1 " -Display ), Koordinatenraum: 414 x 896 Punkte und 828 x 1792 Pixel, 326 ppi, physische Größe des Geräts beträgt 75,9 x 150,9 mm (2,98 x 5,94 Zoll) .

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅁 Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 828.0, 1792.0), scale: 2.0

Größe für iPhone X🅂 und iPhone X mit @ 3- facher Skalierung (Apple-Name: Super Retina HD 5,8 "-Display ), Koordinatenraum: 375 x 812 Punkte und 1125 x 2436 Pixel, 458 ppi, physische Größe des Geräts beträgt 2,79 x 5,65 Zoll oder 70,9 x 143,6 mm.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 and X Screen bounds: (0.0, 0.0, 375.0, 812.0), Screen resolution: (0.0, 0.0, 1125.0, 2436.0), scale: 3.0

Geben Sie hier die Bildbeschreibung ein

Größe für iPhone 6, 6S, 7 und 8 mit 3-facher Skalierung (Apple-Name: Retina HD 5.5 ), Koordinatenraum: 414 x 736 Punkte und 1242 x 2208 Pixel, 401 ppi, physische Bildschirmgröße: 2,7 x 4,8 Zoll oder 68 x 122 mm . Im Zoom-Modus, dh ohne die neuen LaunchImages oder im Setup auf dem iPhone 6 Plus ausgewählt, beträgt die native Skala 2,88 und der Bildschirm 320 x 568 Punkte. Dies entspricht der nativen Größe des iPhone 5:

Screen bounds: {{0, 0}, {414, 736}}, Screen resolution: <UIScreen: 0x7f97fad330b0; bounds = {{0, 0}, {414, 736}};
mode = <UIScreenMode: 0x7f97fae1ce00; size = 1242.000000 x 2208.000000>>, scale: 3.000000, nativeScale: 3.000000

Größe für iPhone 6 und iPhone 6S mit @ 2x Skalierung (Apple-Name: Retina HD 4.7 ), Koordinatenraum: 375 x 667 Punkte und 750 x 1334 Pixel, 326 ppi, physische Bildschirmgröße: 2,3 x 4,1 Zoll oder 58 x 104 mm . Im Zoom-Modus, dh ohne die neuen LaunchImages, beträgt der Bildschirm 320 x 568 Punkte. Dies entspricht der nativen Größe des iPhone 5:

Screen bounds: {{0, 0}, {375, 667}}, Screen resolution: <UIScreen: 0x7fa01b5182d0; bounds = {{0, 0}, {375, 667}};
mode = <UIScreenMode: 0x7fa01b711760; size = 750.000000 x 1334.000000>>, scale: 2.000000, nativeScale: 2.000000

Und iPhone 5 zum Vergleich ist 640 x 1136, iPhone 4 640 x 960.


Hier ist der Code, mit dem ich dies überprüft habe (beachten Sie, dass nativeScale nur unter iOS 8 ausgeführt wird):

UIScreen *mainScreen = [UIScreen mainScreen];
NSLog(@"Screen bounds: %@, Screen resolution: %@, scale: %f, nativeScale: %f",
          NSStringFromCGRect(mainScreen.bounds), mainScreen.coordinateSpace, mainScreen.scale, mainScreen.nativeScale);

Hinweis: Laden Sie LaunchImages hoch, andernfalls wird die App im Zoom-Modus ausgeführt und zeigt nicht die richtige Skalierung oder Bildschirmgröße an. Im Zoom-Modus ist das nativeScaleund scalenicht dasselbe. Auf einem tatsächlichen Gerät kann die Skalierung auf dem iPhone 6 Plus 2,608 betragen, auch wenn es nicht im Zoom-Modus ausgeführt wird. Auf dem Simulator wird jedoch eine Skalierung von 3,0 angezeigt.

IPhone 6 und 6 Plus vergleichen


3
Ich denke, Sie haben die neuen Startbildversionen nicht hinzugefügt. Das ist wahrscheinlich der Grund, warum die App im "Kompatibilitätsmodus" ausgeführt wird und die Bildschirmgrenzen auf beiden Geräten die alten 320x576 sind.
Daniel Rinser

3
Sobald Sie die neuen Startbildgrößen hinzufügen, erhalten Sie die richtigen (logischen) Bildschirmgrößen: 375 x 667 für das iPhone 6 und 414 x 736 für das 6+.
Daniel Rinser

1
@ DanielRinser Danke dafür. Ich werde es ausprobieren.
Sverrisson

@ DanielRinser, danke für deine Eingabe zu den Startbildern. Ich habe die Antwort basierend auf Ihrer Eingabe aktualisiert.
Sverrisson

und was ist mit Assets für iPhone 4? Wie sollen sie benannt werden und wie werden sie in den Asset-Katalog aufgenommen, wenn für sie kein Slot vorhanden ist? Der Assets-Katalog verfügt über 3 Steckplätze für iPhone-Bilder: 1x, 2x und 3x. Wenn 2x und 3x für iPhone 6 und 6+ Assets sind, setzen wir dann iPhone 4 Assets auf 1x? Das glaube ich nicht.
Ente

96

Die reale / physische iPhone 6 Plus-Auflösung beträgt 1920 x 1080, aber in Xcode können Sie Ihre Schnittstelle auf eine Auflösung von 2208 x 1242 (736 x 414 Punkte) einstellen. Auf dem Gerät wird sie automatisch auf 1920 x 1080 Pixel verkleinert.

Kurzreferenz zu iPhone-Auflösungen:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

iPhone Auflösungen


3
Schöne und einfache Antwort. Danke Leszek.
SJ Lim

46

Sie sollten wahrscheinlich die Verwendung von Startbildern in iOS 8 einstellen und ein Storyboard oder nib / xib verwenden.

  • Öffnen Sie in Xcode 6 das FileMenü und wählen Sie NewFile...iOSUser InterfaceLaunch Screen.

  • Öffnen Sie dann die Einstellungen für Ihr Projekt, indem Sie darauf klicken.

  • In der GeneralRegisterkarte im Abschnitt genannt App Icons and Launch Images, stellen die Launch Screen Filezu den Dateien , die Sie gerade erstellt hat (dies wird gesetzt UILaunchStoryboardNamein info.plist).

Beachten Sie, dass der Simulator vorerst nur einen schwarzen Bildschirm anzeigt, sodass Sie auf einem realen Gerät testen müssen .

Hinzufügen einer Xib-Datei für den Startbildschirm zu Ihrem Projekt:

Hinzufügen einer neuen Startbildschirm-XIB-Datei

Konfigurieren Sie Ihr Projekt für die Verwendung der Startbildschirm-XIB-Datei anstelle des Asset-Katalogs:

Konfigurieren Sie das Projekt für die Verwendung von Launch Screen xob


1
Fast perfekte Anleitung, aber es sollte Datei sein -> NEU -> Datei ... usw. Es hat eine Weile gedauert, bis die zweite Datei gefunden wurde :) Danke für die Hilfe!
Wird

Wie lässt du diese gut aussehen? Wenn ich versuche, ein Bild darauf zu platzieren, wird es sehr wackelig.
Badweasel

Wenn Sie nicht nur ein Bild anzeigen und die Benutzeroberfläche zum Laden anzeigen möchten, ist dies eine gute Idee, da ein Bild immer noch die entsprechende Größe haben muss, unabhängig davon, ob es sich in einem Storyboard befindet oder nicht. Ebenso, wenn Sie das Bild in Code zeichnen können, könnten Sie das umgehen, nehme ich an.
AppHandwerker

Sie müssen weiterhin Bilddateien bereitstellen, wenn Sie vor iOS 8 etwas unterstützen, da die Start-XIBs nicht abwärtskompatibel sind.
Mark Bridges

24

Auf dem physischen Gerät ist Grenzen Hauptbildschirm des iPhone 6 Plus 2208x1242 und nativeBounds ist 1920x1080 . Es ist eine Hardware-Skalierung erforderlich, um die Größe auf die physische Anzeige zu ändern.

Auf dem Simulator betragen die Grenzen des Hauptbildschirms und der native Grenzen des iPhone 6 Plus 2208 x 1242.

Mit anderen Worten ... Videos, OpenGL und andere Dinge, die auf CALayersdiesem Umgang mit Pixeln basieren , befassen sich mit dem realen 1920x1080- Bildpuffer auf dem Gerät (oder 2208x1242 auf der Sim). Dinge, die sich mit Punkten in UIKitbefassen, werden mit den Grenzen von 2208 x 1242 (x3) behandelt und auf dem Gerät entsprechend skaliert.

Der Simulator hat keinen Zugriff auf dieselbe Hardware, die die Skalierung auf dem Gerät durchführt, und die Simulation in Software hat keinen großen Vorteil, da sie andere Ergebnisse als die Hardware liefern würde. Daher ist es sinnvoll, nativeBoundsden Hauptbildschirm eines simulierten Geräts auf die Grenzen des Hauptbildschirms des physischen Geräts einzustellen .

iOS 8 fügte API zu UIScreen( nativeScaleund nativeBounds) hinzu, damit ein Entwickler die Auflösung der CADisplayentsprechenden API bestimmen kann UIScreen.


13

Für diejenigen wie mich, die sich fragen, wie ältere Apps behandelt werden, habe ich einige Tests und Berechnungen zu diesem Thema durchgeführt.

Dank des Hinweises von @ hannes-sverrisson ging ich davon aus, dass eine Legacy-App in iPhone 6 und iPhone 6 plus mit einer 320 x 568-Ansicht behandelt wird.

Der Test wurde mit einem einfachen schwarzen Hintergrund bg@2x.pngmit einem weißen Rand durchgeführt. Der Hintergrund hat eine Größe von 640 x 1136 Pixel und ist schwarz mit einem inneren weißen Rand von 1 Pixel.

Unten sehen Sie die vom Simulator bereitgestellten Screenshots:

Auf dem iPhone 6-Screenshot sehen wir einen Rand von 1 Pixel oben und unten am weißen Rand und einen Rand von 2 Pixel auf dem iPhone 6 plus-Screenshot. Dies gibt uns einen verwendeten Speicherplatz von 1242 x 2204 auf dem iPhone 6 plus anstelle von 1242 x 2208 und 750 x 1332 auf dem iPhone 6 anstelle von 750 x 1334.

Wir können davon ausgehen, dass diese toten Pixel das iPhone 5-Seitenverhältnis berücksichtigen sollen:

iPhone 5               640 / 1136 = 0.5634
iPhone 6 (used)        750 / 1332 = 0.5631
iPhone 6 (real)        750 / 1334 = 0.5622
iPhone 6 plus (used)  1242 / 2204 = 0.5635
iPhone 6 plus (real)  1242 / 2208 = 0.5625

Zweitens ist es wichtig zu wissen, dass @ 2x-Ressourcen nicht nur auf dem iPhone 6 plus (das @ 3x-Assets erwartet), sondern auch auf dem iPhone 6 skaliert werden. Dies liegt wahrscheinlich daran, dass eine Nicht-Skalierung der Ressourcen zu unerwarteten Layouts geführt hätte zur Vergrößerung der Ansicht.

Diese Skalierung ist jedoch in Breite und Höhe nicht gleichwertig. Ich habe es mit einer 264x264 @ 2x-Ressource versucht. Angesichts der Ergebnisse muss ich davon ausgehen, dass die Skalierung direkt proportional zum Pixel / Punkte-Verhältnis ist.

Device         Width scale             Computed width   Screenshot width
iPhone 5        640 /  640 = 1.0                        264 px
iPhone 6        750 /  640 = 1.171875  309.375          309 px
iPhone 6 plus  1242 /  640 = 1.940625  512.325          512 px

Device         Height scale            Computed height  Screenshot height
iPhone 5       1136 / 1136 = 1.0                        264 px
iPhone 6       1332 / 1136 = 1.172535  309.549          310 px
iPhone 6 plus  2204 / 1136 = 1.940141  512.197          512 px

Es ist wichtig zu beachten, dass die Skalierung des iPhone 6 in Breite und Höhe (309 x 310) nicht gleich ist. Dies bestätigt tendenziell die obige Theorie, dass die Skalierung in Breite und Höhe nicht proportional ist, sondern das Pixel / Punkt-Verhältnis verwendet.

Ich hoffe das hilft.


12

Schauen Sie sich diese Infografik an: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Es erklärt die Unterschiede zwischen alten iPhones, iPhone 6 und iPhone 6 Plus. Sie können einen Vergleich der Bildschirmgrößen in Punkten, gerenderten Pixeln und physischen Pixeln sehen. Dort finden Sie auch eine Antwort auf Ihre Frage:

iPhone 6 Plus - mit Retina-Display HD. Der Skalierungsfaktor beträgt 3 und das Bild wird anschließend von gerenderten 2208 × 1242 Pixel auf 1920 × 1080 Pixel verkleinert.

Das Downscaling-Verhältnis beträgt 1920/2288 = 1080/1242 = 20/23. Das bedeutet, dass alle 23 Pixel des ursprünglichen Renderings auf 20 physische Pixel abgebildet werden müssen. Mit anderen Worten, das Bild wird auf ungefähr 87% seiner ursprünglichen Größe verkleinert.

Aktualisieren:

Es gibt eine aktualisierte Version der oben genannten Infografik. Es enthält detailliertere Informationen zu Unterschieden in der Bildschirmauflösung und deckt alle bisherigen iPhone-Modelle ab, einschließlich 4-Zoll-Geräte.

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


Also gibt es auch bei ausgeschaltetem Anti-Aliasing nicht optionales Anti-Aliasing, das beim Downscaling weitergeht?
Sam

Hätte diese Infografik einen 4-Zoll-Bildschirm enthalten, wäre das fantastisch gewesen.
Rajesh

@ Rajesh Ich habe meine Antwort aktualisiert. Überprüfen Sie sie jetzt auf Informationen zu 4-Zoll-Geräten.
Darrarski

4

Auch wenn ich den Ton von John Grubers Daring Fireball-Blog im Allgemeinen nicht mag, ist seine größere iPhone-Display-Vermutung eine Lektüre wert.

Er vermutete, bekam aber sowohl die Auflösung in Punkten als auch in Pixel für beide Modelle genau richtig, außer dass er (ich auch nicht) nicht erwartet hatte, dass Apple ein physisches Display mit kleinerer Auflösung bauen und verkleinern würde (Details finden Sie in der Antwort von @ Tommy).

Der Kern des Ganzen ist, dass man aufhören sollte, in Pixeln zu denken, und anfangen sollte, in Punkten zu denken (dies ist seit geraumer Zeit der Fall, es ist keine neuere Erfindung) und die daraus resultierende physikalische Größe von UI-Elementen. Kurz gesagt, beide neuen iPhone-Modelle verbessern sich in dieser Hinsicht, da die meisten Elemente physisch gleich groß bleiben. Sie können einfach mehr davon auf den Bildschirm passen (für jeden größeren Bildschirm können Sie mehr passen).

Ich bin nur ein wenig enttäuscht, dass sie die interne Auflösung für das größere Modell nicht immer der tatsächlichen Bildschirmauflösung 1: 1 zugeordnet haben.


Wir denken in Punkten, aber leider müssen wir in Photoshop Bilder in Pixel erstellen ... 😃
Duck

2
Pixel sind für viele von uns aus vielen Gründen wichtig. Während Apple seine eigenen Gedanken zu diesem Thema überwacht, haben sie aus sehr guten Gründen widerwillig [UIScreen nativeBounds] in iOS8 hinzugefügt.
Ctpenrose

Ja, Pixel sind ebenfalls wichtig, aber für statische Elemente wie Bilder (Begrüßungsbildschirme und dergleichen). Mein Punkt (Wortspiel beabsichtigt) war eher für das Layout des Anwendungsbildschirms, Dinge, die dynamisch gezeichnet wurden.
Rawpower
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.