Confusione risoluzione iPhone 6 Plus: Xcode o il sito Web di Apple? per lo sviluppo


265

Il sito Web di Apple afferma che la risoluzione è 1080p: 1920 x 1080

Tuttavia, la schermata di avvio richiesta da Xcode (8.0 GM lanciato oggi) è 2208 x 1242.

Chi ha ragione?

Xcode


Le immagini di lancio per iPhone 6+ devono essere 1242x2208 e 2208x1242. Almeno questo fa sì che le app funzionino correttamente nel simulatore (e questo è documentato nell'HIG). Non ho capito perché questo è diverso dalla presunta dimensione dello schermo fisico di 1920x1080.
rmaddy,

2
discrepanza molto strana.
JasonGenX,


Questo potrebbe cambiare nella versione stabile di Xcode 6.1. È?
Jayprakash Dubey,

3
Per aggiornare il collegamento da Andreas, consulta la "Guida definitiva alle risoluzioni dell'iPhone" paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
David James,

Risposte:


308

L'iPhone 6+ esegue il rendering internamente utilizzando risorse @ 3x con una risoluzione virtuale di 2208 × 1242 (con 736x414 punti), quindi campiona verso il basso per la visualizzazione. Lo stesso che usare una risoluzione in scala su un MacBook Retina: consente loro di colpire un multiplo integrale per le risorse pixel pur mantenendo ad esempio il testo da 12 pt dello stesso formato sullo schermo.

Quindi, sì, le schermate di avvio devono essere di quelle dimensioni.

La matematica:

Il 6, il 5s, il 5, il 4s e il 4 sono tutti 326 pixel per pollice e usano @ 2x asset per attenersi ai circa 160 punti per pollice di tutti i dispositivi precedenti.

Il 6+ è di 401 pixel per pollice. Quindi avrebbe ipoteticamente bisogno di risorse di circa 2.46x. Invece, Apple utilizza le risorse @ 3x e riduce l'output completo fino a circa l'84% delle sue dimensioni naturali.

In pratica, Apple ha deciso di optare per più dell'87%, trasformando il 1080 in 1242. Non c'è dubbio che fosse trovare il più vicino possibile all'84% che producesse comunque dimensioni integrali in entrambe le direzioni - 1242/1080 = 2208/1920 esattamente , mentre se avessi trasformato il 1080 in, diciamo, 1286, avresti in qualche modo bisogno di renderizzare 2286.22 pixel in verticale per ridimensionare bene.


6
Come l'hai calcolato-> "risoluzione virtuale di 2208 × 1242 (con 736x414 punti)" e questo "ha bisogno di circa @ risorse 2.46x" Cosa sarà UIScreen mainScreen] .bounds.size.height restituirà per 6+? 568, 568 * 3 (1704) o 1920.
msk,

1
Forse aggiungi una nota a questa risposta sulle immagini di lancio? (vedi la risposta di Hannes) Utile da tenere a mente per l'aggiornamento delle app esistenti (altrimenti gira a 320x576 @ 3x - Sono stato confuso per un po '!)
Joseph Humfrey,

2
@msk [UIScreen mainScreen].bounds.size.heightrestituisce 736 nel simulatore di iPhone 6+ in modalità verticale . Questo è il valore 2208 diviso per la scala di 3. La larghezza è 414.
rmaddy

1
Non ha esattamente le stesse dimensioni con @ 3x con la risoluzione 1242 * 2208, è allungato al 6%.
Binarian,

4
Che orribile clamore! Una perdita a livello di sistema di prestazioni, memoria e nitidezza solo per rendere leggermente più semplici alcune regolazioni delle dimensioni a livello di API! Beh, suppongo che tutto avrà senso quando pubblicheranno l'iPhone 7 Plus con un display da 5,5 "461 ppi.
sup

114

La risposta è che le app più vecchie funzionano in modalità Zoomato 2208 x 1242. Ma quando viene creata un'app per i nuovi telefoni le risoluzioni disponibili sono: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 e Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Ciò sta causando la confusione menzionata nella domanda. Per creare app che utilizzano le dimensioni a schermo intero dei nuovi telefoni, aggiungi LaunchImages nelle dimensioni: 1125 x 2436, 1242 x 2208, 2208 x 1242 e 750 x 1334.

Aggiornato per i nuovi iPhone 11, 11 Pro, 11 Pro Max

Dimensioni per iPhone 11 Pro Max con ridimensionamento @ 3x , spazio coordinate: 414 x 896 punti e 1242 x 2688 pixel, 458 ppi, la dimensione fisica del dispositivo è 3,06 x 6,22 pollici o 77,8 x 158,0 mm. Display XDR Super Retina da 6,5 ​​".

Dimensioni per iPhone 11 Pro con ridimensionamento @ 3x , spazio coordinate: 375 x 812 punti e 1125 x 2436 pixel, 458 ppi, la dimensione fisica del dispositivo è 2,81 x 5,67 pollici o 71,4 x 144,0 mm. Display Super Retina XDR da 5,8 ".

Dimensioni per iPhone 11 con ridimensionamento @ 2x , spazio delle coordinate: 414 x 896 punti e 828 x 1792 pixel, 326 ppi, la dimensione fisica del dispositivo è 2,98 x 5,94 pollici o 75,7 x 150,9 mm. Display HD da 6,1 "Liquid Retina.

Dimensioni per iPhone X🅂 Max con ridimensionamento @ 3x (nome Apple: display Super Retina HD 6.5 " ), spazio coordinate: 414 x 896 punti e 1242 x 2688 pixel, 458 ppi, la dimensione fisica del dispositivo è 3,05 x 6,20 pollici o 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

Dimensioni per iPhone X🅁 con ridimensionamento @ 2x (nome Apple: display Super Retina HD 6.1 " ), spazio coordinate: 414 x 896 punti e 828 x 1792 pixel, 326 ppi, la dimensione fisica del dispositivo è 2,98 x 5,94 pollici o 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

Dimensioni per iPhone X🅂 e iPhone X con ridimensionamento @ 3x (nome Apple: display Super Retina HD 5.8 " ), spazio coordinate: 375 x 812 punti e 1125 x 2436 pixel, 458 ppi, la dimensione fisica del dispositivo è 2,79 x 5,65 pollici o 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

inserisci qui la descrizione dell'immagine

Dimensioni per iPhone 6, 6S, 7 e 8 con ridimensionamento @ 3x (nome Apple: Retina HD 5.5 ), spazio delle coordinate: 414 x 736 punti e 1242 x 2208 pixel, 401 ppi, la dimensione fisica dello schermo è 2,7 x 4,8 pollici o 68 x 122 mm . Quando si esegue in modalità Zoom, ovvero senza il nuovo LaunchImages o scelto in Setup su iPhone 6 Plus, la scala nativa è 2,88 e lo schermo è 320 x 568 punti, che è la dimensione nativa di 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

Dimensioni per iPhone 6 e iPhone 6S con ridimensionamento @ 2x (nome Apple: Retina HD 4.7 ), spazio delle coordinate: 375 x 667 punti e 750 x 1334 pixel, 326 ppi, la dimensione fisica dello schermo è 2,3 x 4,1 pollici o 58 x 104 mm . Quando si esegue in modalità Zoom, ovvero senza il nuovo LaunchImages, lo schermo è 320 x 568 punti, che è la dimensione nativa di 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

E iPhone 5 per il confronto è 640 x 1136, iPhone 4 640 x 960.


Ecco il codice che ho usato per verificarlo (nota che nativeScale funziona solo su iOS 8):

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

Nota: carica LaunchImages altrimenti l'app verrà eseguita in modalità Zoom e non mostrerà il ridimensionamento corretto o le dimensioni dello schermo. In modalità Zoomato, il nativeScalee scalenon sarà lo stesso. Su un dispositivo reale la scala può essere 2.608 sull'iPhone 6 Plus, anche quando non è in esecuzione in modalità Zoom, ma mostrerà la scala 3.0 quando è in esecuzione sul simulatore.

Confronto tra iPhone 6 e 6 Plus


3
Suppongo che tu non abbia aggiunto le nuove versioni dell'immagine di lancio. Questo è probabilmente il motivo per cui l'app viene eseguita in "modalità compatibilità" e i limiti dello schermo sono i vecchi 320x576 su entrambi i dispositivi.
Daniel Rinser,

3
Non appena aggiungi le nuove dimensioni dell'immagine di avvio, ottieni le dimensioni (logiche) dello schermo corrette: 375x667 per iPhone 6 e 414x736 per 6+.
Daniel Rinser,

1
@DanielRinser Grazie per quello. Lo proverò.
Sverrisson,

@DanielRinser grazie per il tuo contributo alle immagini di avvio. Ho aggiornato la risposta in base al tuo contributo.
Sverrisson,

e che dire delle risorse per iPhone 4? Come dovrebbero essere nominati e come inserirli nel catalogo delle risorse se non ci sono slot per loro? Il catalogo delle risorse ha 3 slot per le immagini di iPhone: 1x, 2x e 3x. Se le risorse 2x e 3x sono per iPhone 6 e 6+, inseriamo le risorse di iPhone 4 su 1x? Io non la penso così.
Anatra

96

La risoluzione reale / fisica di iPhone 6 Plus è 1920x1080 ma in Xcode crei la tua interfaccia per la risoluzione 2208x1242 (736x414 punti) e sul dispositivo viene ridimensionata automaticamente a 1920x1080 pixel.

Riferimento rapido risoluzioni 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"

Risoluzioni iPhone


3
Risposta bella e semplice. Grazie Leszek.
SJ Lim,

46

Probabilmente dovresti smettere di usare le immagini di lancio in iOS 8 e utilizzare uno storyboard o un pennino / xib.

  • In Xcode 6 , apri il Filemenu e scegli NewFile...iOSUser InterfaceLaunch Screen.

  • Quindi apri le impostazioni per il tuo progetto facendo clic su di esso.

  • Nella Generalscheda, nella sezione chiamata App Icons and Launch Images, imposta Launch Screen Filei file appena creati (questo verrà impostato UILaunchStoryboardNamein info.plist).

Si noti che per il momento il simulatore mostrerà solo una schermata nera, quindi è necessario eseguire il test su un dispositivo reale .

Aggiunta di un file xib della schermata di avvio al progetto:

Aggiunta di un nuovo file xib della schermata di avvio

Configurazione del progetto per utilizzare il file xib della schermata di avvio anziché il Catalogo risorse:

Configura il progetto per utilizzare Launch Screen xob


1
Istruzioni quasi perfette, ma dovrebbe essere File -> NUOVO -> File ... ecc. Ci sono voluti un po 'per trovare il secondo file :) Grazie per l'aiuto!
Sarà l'

Come fai a renderli belli? Quando provo a mettere un'immagine su di essa diventa molto traballante.
badweasel,

Se non stai solo visualizzando un'immagine e vuoi mostrare l'interfaccia utente per il caricamento, questa è una buona idea, poiché un'immagine dovrebbe comunque avere le dimensioni appropriate, indipendentemente dal fatto che fosse in uno storyboard o meno. Allo stesso modo se riesci a disegnare l'immagine in codice, allora potresti aggirare quello che suppongo.
AppHandwerker,

Devi ancora fornire file di immagine se stai supportando qualcosa prima di iOS 8 poiché gli xib di lancio non sono compatibili con le versioni precedenti.
Mark Bridges

24

Sul dispositivo fisico, i limiti dello schermo principale di iPhone 6 Plus sono 2208x1242 e nativeBounds è 1920x1080 . È necessario un ridimensionamento dell'hardware per ridimensionare il display fisico.

Sul simulatore, i limiti della schermata principale dell'iPhone 6 Plus e i nativeBound sono entrambi 2208x1242.

In altre parole ... Video, OpenGL e altre cose basate CALayerssull'affare con i pixel gestiranno il vero frame buffer 1920x1080 sul dispositivo (o 2208x1242 su sim). Le cose che si occupano dei punti UIKitverranno gestite con i limiti 2208x1242 (x3) e ridimensionate nel modo appropriato sul dispositivo.

Il simulatore non ha accesso allo stesso hardware che sta eseguendo il ridimensionamento sul dispositivo e non c'è davvero un grande vantaggio nel simularlo nel software in quanto produrrebbe risultati diversi rispetto all'hardware. Pertanto ha senso impostare la nativeBoundsschermata principale di un dispositivo simulato sui limiti della schermata principale del dispositivo fisico.

iOS 8 ha aggiunto API a UIScreen( nativeScalee nativeBounds) per consentire a uno sviluppatore di determinare la risoluzione del CADisplaycorrispondente a UIScreen.


13

Per quelli come me che si chiedono come vengono trattate le app legacy, ho fatto un po 'di test e calcoli sull'argomento.

Grazie al suggerimento di @ hannes-sverrisson, ho iniziato supponendo che un'app legacy sia trattata con una vista 320x568 in iPhone 6 e iPhone 6 plus.

Il test è stato effettuato con un semplice sfondo nero bg@2x.pngcon un bordo bianco. Lo sfondo ha una dimensione di 640x1136 pixel ed è nero con un bordo bianco interno di 1 pixel.

Di seguito sono riportati gli screenshot forniti dal simulatore:

Nello screenshot di iPhone 6, possiamo vedere un margine di 1 pixel nella parte superiore e inferiore del bordo bianco e un margine di 2 pixel nello screenshot di iPhone 6 plus. Questo ci dà uno spazio usato di 1242x2204 su iPhone 6 plus, invece di 1242x2208 e 750x1332 su iPhone 6, anziché 750x1334.

Possiamo supporre che quei pixel morti debbano rispettare le proporzioni di 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

In secondo luogo, è importante sapere che le risorse @ 2x verranno ridimensionate non solo su iPhone 6 plus (che prevede risorse @ 3x), ma anche su iPhone 6. Ciò è probabilmente dovuto al fatto che il ridimensionamento delle risorse non avrebbe comportato layout imprevisti, a causa all'ampliamento della vista.

Tuttavia, tale ridimensionamento non è equivalente in larghezza e altezza. L'ho provato con una risorsa 264x264 @ 2x. Dati i risultati, devo presumere che il ridimensionamento sia direttamente proporzionale al rapporto pixel / punti.

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

È importante notare che il ridimensionamento di iPhone 6 non è lo stesso in larghezza e altezza (309x310). Ciò tende a confermare la teoria di cui sopra che il ridimensionamento non è proporzionale in larghezza e altezza, ma utilizza il rapporto pixel / punti.

Spero che aiuti.


12

Dai un'occhiata a questa infografica: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Spiega le differenze tra i vecchi iPhone, iPhone 6 e iPhone 6 Plus. Puoi vedere il confronto delle dimensioni dello schermo in punti, pixel renderizzati e pixel fisici. Qui troverai anche la risposta alla tua domanda:

iPhone 6 Plus - con display Retina HD. Il fattore di scala è 3 e l'immagine viene successivamente ridotta da 2208 × 1242 pixel a 1920 × 1080 pixel.

Il rapporto di ridimensionamento è 1920/2208 = 1080/1242 = 20 / 23. Ciò significa che ogni 23 pixel del rendering originale devono essere mappati su 20 pixel fisici. In altre parole, l'immagine viene ridimensionata all'87% circa delle dimensioni originali.

Aggiornare:

Esiste una versione aggiornata di infografica sopra menzionata. Contiene informazioni più dettagliate sulle differenze di risoluzione dello schermo e copre tutti i modelli di iPhone finora, compresi i dispositivi da 4 pollici.

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


Quindi anche con l'anti-aliasing disattivato esiste un anti-aliasing non opzionale che continua nel downscaling?
Sam,

Se quell'infografica includesse uno schermo da 4 pollici sarebbe stato fantastico.
Rajesh,

@Rajesh Ho aggiornato la mia risposta, controlla ora per informazioni sui dispositivi da 4 pollici.
Darrarski,

4

Anche se in genere non mi piace il tono del blog Daring Fireball di John Gruber, la sua congettura del display iPhone più grande merita la lettura.

Ha indovinato, ma ha ottenuto esattamente la risoluzione sia in punti che in pixel per entrambi i modelli, tranne per il fatto che non mi aspettavo (nemmeno io) che Apple costruisse un display fisico con una risoluzione più piccola e ridimensionasse (i dettagli sono nella risposta di @ Tommy).

L'essenza di tutto ciò è che si dovrebbe smettere di pensare in termini di pixel e iniziare a pensare in termini di punti (questo è il caso da un po 'di tempo, non è un'invenzione recente) e la risultante dimensione fisica degli elementi dell'interfaccia utente. In breve, entrambi i nuovi modelli di iPhone migliorano a questo proposito dal momento che fisicamente la maggior parte degli elementi rimane delle stesse dimensioni, puoi semplicemente adattarne più sullo schermo (per ogni schermo più grande puoi adattarti di più).

Sono solo leggermente deluso dal fatto che non abbiano mantenuto la mappatura della risoluzione interna alla risoluzione effettiva dello schermo 1: 1 per il modello più grande.


pensiamo in punti ma sfortunatamente dobbiamo creare immagini in pixel su Photoshop ... 😃
Anatra

2
I pixel contano per molti di noi per molte ragioni. Mentre Apple si occupa del proprio pensiero su questo argomento, ha aggiunto a malincuore [UIScreen nativeBounds] in iOS8 per ottime ragioni.
ctpenrose,

Sì, anche i pixel sono importanti, ma per risorse statiche come le immagini (splashscreen e simili). Il mio punto (gioco di parole) era piuttosto per il layout della schermata dell'applicazione, le cose disegnate in modo dinamico.
rawpower
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.