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

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?

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.

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

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.

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"

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

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

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.

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

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

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.

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

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.