Confusion dans la résolution de l'iPhone 6 Plus: Xcode ou le site Web d'Apple? Pour le developpement

Le site Web d'Apple affirme que la résolution est de 1080p: 1920 x 1080

Cependant, l'écran de lancement requis par Xcode (8.0 GM lancé aujourd'hui) est de 2208 x 1242.

Qui a raison?

L'iPhone 6+ effectue le rendu en interne en utilisant des ressources @ 3x à une résolution virtuelle de 2208 × 1242 (avec 736x414 points), puis les échantillonne pour les afficher. Identique à l'utilisation d'une résolution mise à l'échelle sur un MacBook Retina - cela leur permet d'atteindre un multiple entier pour les actifs de pixels tout en ayant par exemple un texte 12 pt de la même taille à l'écran.

Donc, oui, les écrans de lancement doivent être de cette taille.

Les maths:

Les 6, les 5, les 5, les 4 et les 4 sont tous 326 pixels par pouce, et utilisent @ 2x actifs pour s'en tenir aux environ 160 points par pouce de tous les appareils précédents.

Le 6+ est de 401 pixels par pouce. Il faudrait donc hypothétiquement environ 2,46x actifs. Au lieu de cela, Apple utilise @ 3x actifs et réduit la production complète à environ 84% de sa taille naturelle.

Dans la pratique, Apple a décidé d'aller avec plus de 87%, transformant le 1080 en 1242. Nul doute que cela devait trouver quelque chose d'aussi proche que possible de 84% qui produisait toujours des tailles intégrales dans les deux directions - 1242/1080 = 2208/1920 exactement , alors que si vous aviez transformé le 1080 en, disons, 1286, vous auriez en quelque sorte besoin de rendre 2286,22 pixels verticalement pour bien évoluer.

La réponse est que les anciennes applications fonctionnent en mode zoom 2208 x 1242. Mais lorsqu'une application est conçue pour les nouveaux téléphones, les résolutions disponibles sont: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 et Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Cela provoque la confusion mentionnée dans la question. Pour créer des applications qui utilisent la taille plein écran des nouveaux téléphones, ajoutez LaunchImages dans les tailles: 1125 x 2436, 1242 x 2208, 2208 x 1242 et 750 x 1334.

Mis à jour pour les nouveaux iPhones 11, 11 Pro, 11 Pro Max

Taille pour iPhone 11 Pro Max avec mise à l'échelle @ 3x , espace de coordonnées: 414 x 896 points et 1242 x 2688 pixels, 458 ppp, la taille physique de l'appareil est de 3,06 x 6,22 pouces ou 77,8 x 158,0 mm. Écran Super Retina XDR de 6,5 ".

Taille pour iPhone 11 Pro avec mise à l'échelle @ 3x , espace de coordonnées: 375 x 812 points et 1125 x 2436 pixels, 458 ppp, la taille physique de l'appareil est de 2,81 x 5,67 pouces ou 71,4 x 144,0 mm. Écran Super Retina XDR de 5,8 ".

Taille pour iPhone 11 avec mise à l'échelle @ 2x , espace de coordonnées: 414 x 896 points et 828 x 1792 pixels, 326 ppp, la taille physique de l'appareil est de 2,98 x 5,94 pouces ou 75,7 x 150,9 mm. Écran Liquid Retina HD 6,1 ".

Taille pour iPhone X🅂 Max avec mise à l'échelle @ 3x (nom Apple: écran Super Retina HD 6.5 " ), espace de coordonnées: 414 x 896 points et 1242 x 2688 pixels, 458 ppp, la taille physique de l'appareil est de 3,05 x 6,20 pouces ou 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

Taille pour iPhone X🅁 avec mise à l'échelle @ 2x (nom Apple: écran Super Retina HD 6.1 " ), espace de coordonnées: 414 x 896 points et 828 x 1792 pixels, 326 ppp, la taille physique de l'appareil est de 2,98 x 5,94 pouces ou 75,7 x 150,9 mm .

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

Taille pour iPhone X🅂 et iPhone X avec mise à l'échelle @ 3x (nom Apple: écran Super Retina HD 5,8 " ), espace de coordonnées: 375 x 812 points et 1125 x 2436 pixels, 458 ppp, la taille physique de l'appareil est de 2,79 x 5,65 pouces ou 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

Taille pour iPhone 6, 6S, 7 et 8 avec mise à l'échelle @ 3x (nom Apple: Retina HD 5.5 ), espace de coordonnées: 414 x 736 points et 1242 x 2208 pixels, 401 ppp, la taille physique de l'écran est de 2,7 x 4,8 pouces ou 68 x 122 mm . Lors de l'exécution en mode Zoom, c'est-à-dire sans les nouvelles LaunchImages ou choisies dans la configuration sur iPhone 6 Plus, l'échelle native est de 2,88 et l'écran est de 320 x 568 points, ce qui correspond à la taille native de l'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

Taille pour iPhone 6 et iPhone 6S avec mise à l'échelle @ 2x (nom Apple: Retina HD 4.7 ), espace de coordonnées: 375 x 667 points et 750 x 1334 pixels, 326 ppp, la taille physique de l'écran est de 2,3 x 4,1 pouces ou 58 x 104 mm . En mode Zoom, c'est-à-dire sans les nouvelles LaunchImages, l'écran fait 320 x 568 points, ce qui correspond à la taille native de l'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

Et l' iPhone 5 à titre de comparaison est 640 x 1136, l' iPhone 4 640 x 960.

Voici le code que j'ai utilisé pour vérifier cela (notez que nativeScale ne fonctionne que sur iOS 8):

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

Remarque: Téléchargez LaunchImages sinon l'application s'exécutera en mode Zoom et n'affichera pas la bonne mise à l'échelle ou les tailles d'écran. En mode Zoom, le nativeScaleet scalene sera pas le même. Sur un appareil réel, l'échelle peut être de 2,608 sur l'iPhone 6 Plus, même lorsqu'il ne fonctionne pas en mode Zoom, mais il affichera une échelle de 3,0 lors de l'exécution sur le simulateur.

La résolution réelle / physique de l'iPhone 6 Plus est de 1920x1080, mais dans Xcode, vous créez votre interface pour une résolution de 2208x1242 (736x414 points) et sur l'appareil, elle est automatiquement réduite à 1920x1080 pixels.

Référence rapide des résolutions iPhone:

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"

Vous devriez probablement cesser d'utiliser des images de lancement dans iOS 8 et utiliser un storyboard ou nib / xib.

• Dans Xcode 6 , ouvrez le Filemenu et choisissez New⟶ File...⟶ iOS⟶ User Interface⟶ Launch Screen.

• Ouvrez ensuite les paramètres de votre projet en cliquant dessus.

• Dans l' Generalonglet, dans la section intitulée App Icons and Launch Images, définissez le Launch Screen Filesur les fichiers que vous venez de créer (cela sera défini UILaunchStoryboardNamedans info.plist).

Notez que pour le moment, le simulateur n'affichera qu'un écran noir, vous devez donc tester sur un appareil réel .

Ajout d'un fichier xib Launch Screen à votre projet:

Configuration de votre projet pour utiliser le fichier xib de l'écran de lancement au lieu du catalogue d'actifs:

Sur l'appareil physique, les limites de l'écran principal de l'iPhone 6 Plus sont 2208x1242 et nativeBounds est 1920x1080 . Une mise à l'échelle matérielle est nécessaire pour redimensionner l'affichage physique.

Sur le simulateur, les limites et les bornes natives de l'écran principal de l'iPhone 6 Plus sont toutes deux de 2208 x 1242.

En d'autres termes ... Les vidéos, OpenGL et d'autres choses basées sur CALayersce problème avec les pixels traiteront le vrai tampon de trame 1920x1080 sur l'appareil (ou 2208x1242 sur sim). Les éléments concernant les points UIKitseront traités avec les limites de 2208x1242 (x3) et seront mis à l'échelle selon les besoins sur l'appareil.

Le simulateur n'a pas accès au même matériel qui fait la mise à l'échelle sur l'appareil et il n'y a pas vraiment d'avantage à le simuler dans le logiciel car ils produiraient des résultats différents de ceux du matériel. Ainsi, il est logique de définir l' nativeBoundsécran principal d'un appareil simulé sur les limites de l'écran principal de l'appareil physique.

iOS 8 a ajouté une API à UIScreen( nativeScaleet nativeBounds) pour permettre à un développeur de déterminer la résolution du CADisplaycorrespondant au UIScreen.

Pour ceux comme moi qui se demandent comment les applications héritées sont traitées, j'ai fait un peu de test et de calcul sur le sujet.

Grâce à l'indice @ hannes-sverrisson, j'ai commencé avec l'hypothèse qu'une application héritée est traitée avec une vue 320x568 sur iPhone 6 et iPhone 6 plus.

Le test a été réalisé avec un simple fond noir [email protected]avec une bordure blanche. L'arrière-plan a une taille de 640x1136 pixels, et il est noir avec une bordure blanche intérieure de 1 pixel.

Voici les captures d'écran fournies par le simulateur:

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

Sur la capture d'écran de l'iPhone 6, nous pouvons voir une marge de 1 pixel en haut et en bas de la bordure blanche, et une marge de 2 pixels sur la capture d'écran de l'iPhone 6 plus. Cela nous donne un espace utilisé de 1242x2204 sur iPhone 6 plus, au lieu de 1242x2208, et 750x1332 sur iPhone 6, au lieu de 750x1334.

Nous pouvons supposer que ces pixels morts sont censés respecter le rapport hauteur / largeur de l'iPhone 5:

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

Deuxièmement, il est important de savoir que les ressources @ 2x seront mises à l'échelle non seulement sur l'iPhone 6 plus (qui attend les actifs @ 3x), mais également sur l'iPhone 6. Cela est probablement dû au fait que la non-mise à l'échelle des ressources aurait conduit à des dispositions inattendues, en raison à l'élargissement de la vue.

Cependant, cette mise à l'échelle n'est pas équivalente en largeur et en hauteur. Je l'ai essayé avec une ressource 264x264 @ 2x. Compte tenu des résultats, je dois supposer que la mise à l'échelle est directement proportionnelle au rapport pixels / points.

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

Il est important de noter que la mise à l'échelle de l'iPhone 6 n'est pas la même en largeur et en hauteur (309x310). Cela tend à confirmer la théorie ci-dessus selon laquelle la mise à l'échelle n'est pas proportionnelle en largeur et en hauteur, mais utilise le rapport pixels / points.

J'espère que ça aide.

Consultez cette infographie: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Il explique les différences entre les anciens iPhones, iPhone 6 et iPhone 6 Plus. Vous pouvez voir la comparaison des tailles d'écran en points, pixels rendus et pixels physiques. Vous y trouverez également la réponse à votre question:

iPhone 6 Plus - avec écran Retina HD. Le facteur d'échelle est de 3 et l'image est ensuite réduite de 2208 × 1242 pixels rendus à 1920 × 1080 pixels.

Le rapport de réduction d'échelle est 1920/2208 = 1080/1242 = 20 / 23. Cela signifie que tous les 23 pixels du rendu d'origine doivent être mappés à 20 pixels physiques. En d'autres termes, l'image est réduite à environ 87% de sa taille d'origine.

Mettre à jour:

Il existe une version mise à jour de l'infographie mentionnée ci-dessus. Il contient des informations plus détaillées sur les différences de résolution d'écran et couvre jusqu'à présent tous les modèles d'iPhone, y compris les appareils 4 pouces.

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

Même si je n'aime généralement pas le ton du blog Daring Fireball de John Gruber, sa plus grande conjecture d'affichage pour iPhone vaut bien la lecture.

Il a deviné mais avait exactement la résolution en points et en pixels pour les deux modèles, sauf qu'il ne s'attendait pas (moi non plus) à ce qu'Apple construise une résolution physique plus petite et réduise l'échelle (les détails sont dans la réponse de @ Tommy).

L'essentiel est que l'on devrait arrêter de penser en termes de pixels et commencer à penser en termes de points (cela a été le cas pendant un certain temps, ce n'est pas une invention récente) et la taille physique des éléments d'interface utilisateur qui en résulte. En bref, les deux nouveaux modèles d'iPhone s'améliorent à cet égard, car physiquement la plupart des éléments restent de la même taille, vous pouvez simplement en installer plus sur l'écran (pour chaque écran plus grand, vous pouvez en adapter plus).

Je suis juste un peu déçu qu'ils n'aient pas continué à mapper la résolution interne à la résolution d'écran réelle 1: 1 pour le plus grand modèle.