Confusión de resolución del iPhone 6 Plus: ¿Xcode o el sitio web de Apple? Para desarrollo


265

El sitio web de Apple afirma que la resolución es 1080p: 1920 x 1080

Sin embargo, la pantalla de inicio requerida por Xcode (8.0 GM lanzado hoy) es 2208 x 1242.

¿Quién tiene la razón?

Xcode


Las imágenes de lanzamiento para el iPhone 6+ deben ser 1242x2208 y 2208x1242. Al menos esto hace que las aplicaciones funcionen correctamente en el simulador (y esto está documentado en el HIG). No he descubierto por qué esto es diferente del supuesto tamaño de pantalla física de 1920x1080.
rmaddy

2
Discrepancia muy extraña.
JasonGenX


Esto podría cambiar en la versión estable de Xcode 6.1. ¿Lo es?
Jayprakash Dubey

3
Para actualizar el enlace de Andreas, consulte la "Guía definitiva para las resoluciones de iPhone" paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
David James

Respuestas:


308

El iPhone 6+ se renderiza internamente utilizando activos @ 3x a una resolución virtual de 2208 × 1242 (con 736x414 puntos), luego se muestrea para mostrar. Lo mismo que usar una resolución escalada en una MacBook Retina: les permite alcanzar un múltiplo integral para activos de píxeles mientras que, por ejemplo, el texto de 12 puntos se ve del mismo tamaño en la pantalla.

Entonces, sí, las pantallas de inicio deben ser de ese tamaño.

Las matemáticas:

Los 6, los 5, los 5, los 4 y los 4 tienen 326 píxeles por pulgada, y usan activos @ 2x para mantener los aproximadamente 160 puntos por pulgada de todos los dispositivos anteriores.

El 6+ es 401 píxeles por pulgada. Por lo tanto, hipotéticamente necesitaría aproximadamente 2.46x activos. En cambio, Apple utiliza activos @ 3x y reduce la producción completa a aproximadamente el 84% de su tamaño natural.

En la práctica, Apple ha decidido ir con más del 87%, convirtiendo el 1080 en 1242. Sin duda, fue encontrar algo lo más cercano posible al 84% que todavía produjera tamaños integrales en ambas direcciones: 1242/1080 = 2208/1920 exactamente , mientras que si hubiera convertido el 1080 en, digamos, 1286, de alguna manera necesitaría renderizar 2286.22 píxeles verticalmente para escalar bien.


66
¿Cómo lo calculó?> "Resolución virtual de 2208 × 1242 (con 736x414 puntos)" y esto "necesita aproximadamente @ 2.46x activos" ¿Qué devolverá UIScreen mainScreen] .bounds.size.height para 6+? 568, 568 * 3 (1704) o 1920.
msk

1
¿Quizás agregar una nota a esta respuesta sobre imágenes de lanzamiento? (vea la respuesta de Hannes) Útil para tener en cuenta para las aplicaciones existentes que se están actualizando (de lo contrario, se ejecuta a 320x576 @ 3x - ¡Estaba confundido por un tiempo!)
Joseph Humfrey

2
@msk [UIScreen mainScreen].bounds.size.heightdevuelve 736 en el simulador de iPhone 6+ cuando está en vertical. Este es el valor 2208 dividido por la escala de 3. El ancho es 414.
rmaddy

1
No es exactamente del mismo tamaño con @ 3x con la resolución 1242 * 2208, tiene un 6% de estiramiento.
Binario

44
¡Qué horrible error! ¡Una pérdida de rendimiento y memoria y nitidez en todo el sistema solo para hacer que algunos ajustes de tamaño de nivel API sean un poco más simples! Así que supongo que será todo tiene sentido cuando se suelte el iPhone 7 Plus con un 461 ppi pantalla 5.5" .
sup

114

La respuesta es que las aplicaciones más antiguas se ejecutan en modo zoom 2208 x 1242. Pero cuando se crea una aplicación para los nuevos teléfonos, las resoluciones disponibles son: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 y Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Esto está causando la confusión mencionada en la pregunta. Para crear aplicaciones que utilicen el tamaño de pantalla completa de los nuevos teléfonos, agregue LaunchImages en los tamaños: 1125 x 2436, 1242 x 2208, 2208 x 1242 y 750 x 1334.

Actualizado para los nuevos iPhones 11, 11 Pro, 11 Pro Max

Tamaño para iPhone 11 Pro Max con escala @ 3x , espacio de coordenadas: 414 x 896 puntos y 1242 x 2688 píxeles, 458 ppi, el tamaño físico del dispositivo es 3.06 x 6.22 o 77.8 x 158.0 mm. Pantalla Super Retina XDR de 6.5 ".

Tamaño para iPhone 11 Pro con escala @ 3x , espacio de coordenadas: 375 x 812 puntos y 1125 x 2436 píxeles, 458 ppi, el tamaño físico del dispositivo es 2.81 x 5.67 o 71.4 x 144.0 mm. Pantalla Super Retina XDR de 5.8 ".

Tamaño para iPhone 11 con escala @ 2x , espacio de coordenadas: 414 x 896 puntos y 828 x 1792 píxeles, 326 ppi, el tamaño físico del dispositivo es 2.98 x 5.94 in o 75.7 x 150.9 mm. Pantalla Liquid Retina HD de 6.1 ".

Tamaño para iPhone X🅂 Max con escala @ 3x (nombre de Apple: pantalla Super Retina HD 6.5 " ), espacio de coordenadas: 414 x 896 puntos y 1242 x 2688 píxeles, 458 ppi, el tamaño físico del dispositivo es 3.05 x 6.20 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

Tamaño para iPhone X🅁 con escala @ 2x (nombre de Apple: pantalla Super Retina HD de 6.1 " ), espacio de coordenadas: 414 x 896 puntos y 828 x 1792 píxeles, 326 ppi, el tamaño físico del dispositivo es 2.98 x 5.94 in 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

Tamaño para iPhone X🅂 y iPhone X con escala @ 3x (nombre de Apple: pantalla Super Retina HD 5.8 " ), espacio de coordenadas: 375 x 812 puntos y 1125 x 2436 píxeles, 458 ppi, el tamaño físico del dispositivo es 2.79 x 5.65 in 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

ingrese la descripción de la imagen aquí

Tamaño para iPhone 6, 6S, 7 y 8 con escala @ 3x (nombre de Apple: Retina HD 5.5 ), espacio de coordenadas: 414 x 736 puntos y 1242 x 2208 píxeles, 401 ppi, el tamaño físico de la pantalla es 2.7 x 4.8 in o 68 x 122 mm . Cuando se ejecuta en modo Zoomed, es decir, sin las nuevas imágenes de lanzamiento o elegidas en la configuración del iPhone 6 Plus, la escala nativa es de 2,88 y la pantalla es de 320 x 568 puntos, que es el tamaño nativo del 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

Tamaño para iPhone 6 y iPhone 6S con escala @ 2x (nombre de Apple: Retina HD 4.7 ), espacio de coordenadas: 375 x 667 puntos y 750 x 1334 píxeles, 326 ppi, el tamaño físico de la pantalla es de 2.3 x 4.1 pulgadas o 58 x 104 mm . Cuando se ejecuta en modo zoom, es decir, sin las nuevas imágenes de lanzamiento, la pantalla es de 320 x 568 puntos, que es el tamaño nativo del 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

Y el iPhone 5 en comparación es 640 x 1136, iPhone 4 640 x 960.


Aquí está el código que usé para verificar esto (tenga en cuenta que nativeScale solo se ejecuta en 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: Cargue LaunchImages; de lo contrario, la aplicación se ejecutará en modo Zoom y no mostrará la escala o los tamaños de pantalla correctos. En el modo Zoom, nativeScaley scaleno será lo mismo. En un dispositivo real, la escala puede ser 2.608 en el iPhone 6 Plus, incluso cuando no se ejecuta en modo Zoomed, pero mostrará una escala de 3.0 cuando se ejecuta en el simulador.

Comparando iPhone 6 y 6 Plus


3
Supongo que no agregaste las nuevas versiones de imagen de lanzamiento. Probablemente por eso la aplicación se ejecuta en "modo de compatibilidad" y los límites de la pantalla son los antiguos 320x576 en ambos dispositivos.
Daniel Rinser

3
Tan pronto como agregue los nuevos tamaños de imagen de inicio, obtendrá los tamaños correctos (lógicos) de la pantalla: 375x667 para el iPhone 6 y 414x736 para el 6+.
Daniel Rinser

1
@DanielRinser Gracias por eso. Lo intentaré.
Sverrisson

@DanielRinser gracias por tu aporte en las imágenes de inicio. He actualizado la respuesta en función de su aporte.
Sverrisson

¿Y qué hay de los activos para iPhone 4? ¿Cómo deberían nombrarse y cómo incluirlos en el catálogo de activos si no hay espacio para ellos? El catálogo de activos tiene 3 ranuras para imágenes de iPhone: 1x, 2x y 3x. Si 2x y 3x son para activos de iPhone 6 y 6+, ¿ponemos activos de iPhone 4 en 1x? No lo creo.
Pato

96

La resolución real / física del iPhone 6 Plus es 1920x1080, pero en Xcode configura su interfaz para una resolución de 2208x1242 (736x414 puntos) y en el dispositivo se reduce automáticamente a 1920x1080 píxeles.

Referencia rápida de resoluciones de 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"

resoluciones de iPhone


3
Hermosa y simple respuesta. Gracias Leszek
SJ Lim

46

Probablemente debería dejar de usar imágenes de lanzamiento en iOS 8 y usar un guión gráfico o nib / xib.

  • En Xcode 6 , abra el Filemenú y elija NewFile...iOSUser InterfaceLaunch Screen.

  • Luego abra la configuración de su proyecto haciendo clic en él.

  • En la Generalficha, en la sección llamada App Icons and Launch Images, establecer el Launch Screen Fileque los archivos que acaba de crear (esto se transformará UILaunchStoryboardNameen info.plist).

Tenga en cuenta que, por el momento, el simulador solo mostrará una pantalla en negro, por lo que debe realizar una prueba en un dispositivo real .

Agregar un archivo xib de Launch Screen a su proyecto:

Agregar un nuevo archivo xib de Launch Screen

Configurar su proyecto para usar el archivo xib de Launch Screen en lugar del Catálogo de activos:

Configure el proyecto para usar Launch Screen xob


1
Instrucciones casi perfectas, pero debería ser Archivo -> NUEVO -> Archivo ... etc. Tomó un tiempo encontrar el segundo archivo :) ¡Gracias por ayudar!
Será el

¿Cómo haces que se vean bien? Cuando trato de ponerle una imagen, se vuelve muy inestable.
badweasel

Si no solo muestra una imagen y desea mostrar la interfaz de usuario para cargar, esta es una buena idea, ya que una imagen aún debería tener el tamaño adecuado, independientemente de si estaba en un guión gráfico o no. Del mismo modo, si puede dibujar la imagen en código, supongo que podría dar la vuelta.
AppHandwerker

Aún debe proporcionar archivos de imagen si admite algo anterior a iOS 8 ya que los xibs de lanzamiento no son compatibles con versiones anteriores.
Mark Bridges

24

En el dispositivo físico, los límites de la pantalla principal del iPhone 6 Plus son 2208x1242 y nativeBounds es 1920x1080 . Hay una escala de hardware involucrada para cambiar el tamaño de la pantalla física.

En el simulador, los límites de la pantalla principal del iPhone 6 Plus y los NativeBounds son 2208x1242.

En otras palabras ... Los videos, OpenGL y otras cosas basadas en CALayersese trato con píxeles tratarán con el búfer de cuadro real de 1920x1080 en el dispositivo (o 2208x1242 en sim). Las cosas relacionadas con los puntos se UIKittratarán con los límites de 2208x1242 (x3) y se escalarán según corresponda en el dispositivo.

El simulador no tiene acceso al mismo hardware que está haciendo la escala en el dispositivo y no hay mucho beneficio en simularlo en el software, ya que producirían resultados diferentes que el hardware. Por lo tanto, tiene sentido establecer la nativeBoundspantalla principal de un dispositivo simulado en los límites de la pantalla principal del dispositivo físico.

iOS 8 agregó API a UIScreen( nativeScaley nativeBounds) para permitir que un desarrollador determine la resolución del CADisplaycorrespondiente al UIScreen.


13

Para aquellos como yo que se preguntan cómo se tratan las aplicaciones heredadas, realicé algunas pruebas y cálculos sobre el tema.

Gracias a la sugerencia de @ hannes-sverrisson, comencé asumiendo que una aplicación heredada se trata con una vista de 320x568 en iPhone 6 y iPhone 6 plus.

La prueba se realizó con un fondo negro simple bg@2x.pngcon un borde blanco. El fondo tiene un tamaño de 640x1136 píxeles y es negro con un borde blanco interno de 1 píxel.

A continuación se muestran las capturas de pantalla proporcionadas por el simulador:

En la captura de pantalla del iPhone 6, podemos ver un margen de 1 píxel en la parte superior e inferior del borde blanco, y un margen de 2 píxeles en la captura de pantalla del iPhone 6 plus. Esto nos da un espacio utilizado de 1242x2204 en iPhone 6 plus, en lugar de 1242x2208, y 750x1332 en el iPhone 6, en lugar de 750x1334.

Podemos suponer que esos píxeles muertos deben respetar la relación de aspecto del 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

En segundo lugar, es importante saber que los recursos @ 2x se escalarán no solo en el iPhone 6 plus (que espera activos @ 3x), sino también en el iPhone 6. Esto probablemente se deba a que el hecho de no escalar los recursos habría dado lugar a diseños inesperados, debido a la ampliación de la vista.

Sin embargo, esa escala no es equivalente en ancho y alto. Lo probé con un recurso 264x264 @ 2x. Teniendo en cuenta los resultados, debo suponer que la escala es directamente proporcional a la relación píxeles / puntos.

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 importante tener en cuenta que la escala del iPhone 6 no es igual en ancho y alto (309x310). Esto tiende a confirmar la teoría anterior de que la escala no es proporcional en ancho y alto, sino que utiliza la relación píxeles / puntos.

Espero que esto ayude.


12

Echa un vistazo a esta infografía: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Explica las diferencias entre los antiguos iPhone, iPhone 6 y iPhone 6 Plus. Puede ver la comparación de tamaños de pantalla en puntos, píxeles renderizados y píxeles físicos. También encontrará la respuesta a su pregunta allí:

iPhone 6 Plus: con pantalla Retina HD. El factor de escala es 3 y la imagen luego se reduce de 2208 × 1242 píxeles a 1920 × 1080 píxeles.

La relación de reducción de escala es 1920/2208 = 1080/1242 = 20 / 23. Eso significa que cada 23 píxeles del render original deben asignarse a 20 píxeles físicos. En otras palabras, la imagen se reduce a aproximadamente el 87% de su tamaño original.

Actualizar:

Hay una versión actualizada de la infografía mencionada anteriormente. Contiene información más detallada sobre las diferencias de resolución de pantalla y cubre todos los modelos de iPhone hasta ahora, incluidos los dispositivos de 4 pulgadas.

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


Entonces, incluso con el suavizado desactivado, ¿hay un suavizado no opcional que continúa en la reducción de escala?
Sam

Si esa infografía incluyera una pantalla de 4 pulgadas, habría sido increíble.
Rajesh

@Rajesh He actualizado mi respuesta, compruébelo ahora para obtener información sobre dispositivos de 4 pulgadas.
Darrarski

4

Incluso si generalmente no me gusta el tono del blog Daring Fireball de John Gruber, vale la pena leer su Conjetura de pantalla de iPhone más grande .

Adivinó, pero acertó exactamente la resolución en puntos y en píxeles para ambos modelos, excepto que él (yo tampoco) esperaba que Apple construyera una pantalla física de menor resolución y redujera la escala (los detalles están en la respuesta de @ Tommy).

La esencia de todo es que uno debe dejar de pensar en términos de píxeles y comenzar a pensar en términos de puntos (este ha sido el caso durante bastante tiempo, no es una invención reciente) y el tamaño físico resultante de los elementos de la interfaz de usuario. En resumen, los dos nuevos modelos de iPhone mejoran a este respecto, ya que físicamente la mayoría de los elementos siguen siendo del mismo tamaño, solo puede colocar más de ellos en la pantalla (para cada pantalla más grande puede caber más).

Estoy un poco decepcionado de que no hayan mantenido el mapeo de la resolución interna a la resolución de pantalla real 1: 1 para el modelo más grande.


pensamos en puntos, pero desafortunadamente tenemos que crear imágenes en píxeles en Photoshop ... 😃
Duck

2
Los píxeles son importantes para muchos de nosotros por muchas razones. Si bien Apple hace su propia política de pensamiento sobre este tema, a regañadientes agregaron [UIScreen nativeBounds] en iOS8 por muy buenas razones.
ctpenrose

Sí, los píxeles también son importantes, pero para los activos estáticos como las imágenes (pantallas de bienvenida y demás). Mi punto (juego de palabras) fue más bien para el diseño de la pantalla de la aplicación, las cosas dibujadas dinámicamente.
rawpower
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.