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

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?

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.

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

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.

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"

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 New⟶ File...⟶ iOS⟶ User Interface⟶ Launch 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:

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

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.

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 [email protected]mit 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:

• iPhone 5 Simulator: http://i.stack.imgur.com/b2E5K.png
• iPhone 6 Simulator: http://i.stack.imgur.com/4Qz8N.png
• iPhone 6 plus Simulator: http://i.stack.imgur.com/hQisc.png

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.

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

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.