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


265

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?

Xcode


Les images de lancement pour l'iPhone 6+ doivent être 1242x2208 et 2208x1242. Au moins, cela fait que les applications fonctionnent correctement dans le simulateur (et cela est documenté dans le HIG). Je n'ai pas compris pourquoi cela est différent de la taille d'écran supposée physique de 1920x1080.
rmaddy

2
écart très étrange.
JasonGenX


Cela pourrait changer dans la version stable de Xcode 6.1. C'est ça?
Jayprakash Dubey

3
Pour mettre à jour le lien d'Andreas, voir le "Guide ultime des résolutions iPhone" paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
David James

Réponses:


308

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.


6
Comment l'avez-vous calculé-> "résolution virtuelle de 2208 × 1242 (avec 736x414 points)" et cela "a besoin d'environ @ 2,46x actifs" Qu'est-ce que UIScreen mainScreen] .bounds.size.height retournera pour 6+? 568, 568 * 3 (1704) ou 1920.
msk

1
Peut-être ajouter une note à cette réponse sur les images de lancement? (voir la réponse de Hannes) Utile à garder à l'esprit pour les applications existantes mises à niveau (sinon cela fonctionne à 320x576 @ 3x - j'étais confus pendant un certain temps!)
Joseph Humfrey

2
@msk [UIScreen mainScreen].bounds.size.heightrenvoie 736 dans le simulateur iPhone 6+ en mode portrait. Il s'agit de la valeur 2208 divisée par l'échelle de 3. La largeur est 414.
rmaddy

1
Ce n'est pas exactement la même taille avec @ 3x avec la résolution 1242 * 2208, il est étiré à 6%.
Binarian

4
Quel horrible coup de coude! Une perte de performances, de mémoire et de netteté à l'échelle du système pour simplifier légèrement les ajustements de taille au niveau de l'API! Eh bien, je suppose que tout cela aura du sens lorsqu'ils sortiront l'iPhone 7 Plus avec un écran de 5,5 "à 461 ppp.
sup

114

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

entrez la description de l'image ici

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.

Comparaison de l'iPhone 6 et 6 Plus


3
Je suppose que vous n'avez pas ajouté les nouvelles versions d'image de lancement. C'est probablement pourquoi l'application fonctionne en "mode de compatibilité" et les limites de l'écran sont les anciennes 320x576 sur les deux appareils.
Daniel Rinser

3
Dès que vous ajoutez les nouvelles tailles d'image de lancement, vous obtenez les tailles liées à l'écran (logiques) correctes: 375x667 pour l'iPhone 6 et 414x736 pour le 6+.
Daniel Rinser

1
@DanielRinser Merci pour cela. Je vais l'essayer.
Sverrisson

@DanielRinser merci pour votre contribution sur les images de démarrage. J'ai mis à jour la réponse en fonction de votre saisie.
Sverrisson

et qu'en est-il des actifs pour iPhone 4? Comment les nommer et comment les mettre dans le catalogue des actifs s'il n'y a pas de slot pour eux? Le catalogue des actifs dispose de 3 emplacements pour les images iPhone: 1x, 2x et 3x. Si 2x et 3x sont pour les actifs iPhone 6 et 6+, avons-nous mis les actifs iPhone 4, sur 1x? Je ne pense pas.
Duck

96

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"

Résolutions iPhone


3
Belle et simple réponse. Merci Leszek.
SJ Lim

46

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 NewFile...iOSUser InterfaceLaunch 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:

Ajout d'un nouveau fichier xib d'écran de lancement

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

Configurer le projet pour utiliser Launch Screen xob


1
Instructions presque parfaites, mais ce devrait être Fichier -> NOUVEAU -> Fichier ... etc. Il a fallu un certain temps pour trouver le deuxième fichier :) Merci de votre aide!
Will

Comment les faites-vous bien paraître? Quand j'essaie de mettre une image dessus, ça devient très chancelant.
badweasel

Si vous ne vous contentez pas d'afficher une image et que vous souhaitez afficher l'interface utilisateur pour le chargement, c'est une bonne idée, car une image doit toujours être dans les tailles appropriées, qu'elle soit dans un storyboard ou non. De même, si vous pouvez dessiner l'image en code, vous pouvez contourner cela, je suppose.
AppHandwerker

Vous devez toujours fournir des fichiers image si vous prenez en charge quoi que ce soit avant iOS 8 car les xibs de lancement ne sont pas rétrocompatibles.
Mark Bridges

24

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.


13

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 bg@2x.pngavec 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:

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.


12

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


Donc, même avec l'anti-aliasing désactivé, il existe un anti-aliasing non optionnel qui se produit lors de la réduction d'échelle?
Sam

Si cette infographie incluait un écran de 4 pouces, cela aurait été génial.
Rajesh

@Rajesh J'ai mis à jour ma réponse, vérifiez-la maintenant pour plus d'informations sur les appareils 4 pouces.
Darrarski

4

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.


nous pensons aux points mais malheureusement nous devons créer des images en pixels sur Photoshop ... 😃
Duck

2
Les pixels comptent pour beaucoup d'entre nous pour de nombreuses raisons. Bien qu'Apple fasse sa propre réflexion sur ce sujet, ils ont ajouté à contrecœur [UIScreen nativeBounds] dans iOS8 pour de très bonnes raisons.
ctpenrose du

Oui, les pixels sont également importants, mais pour les actifs statiques comme les images (écrans de démarrage et autres). Mon point (jeu de mots voulu) était plutôt pour la disposition de l'écran de l'application, les choses dessinées dynamiquement.
rawpower
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.