Relación de aspecto de la pantalla del iPhone: Evolución y significado

La **relación de aspecto (Aspect Ratio)** es la proporción **Ancho : Alto** de la pantalla. Define forma, uso y experiencia.

Historia iPhone

ModeloAñoResolución (px)Aspect Ratio (W:H)PulgadasNotas
iPhone original / 3G / 3GS2007-2009320 x 4802:3 (0.667) / 3:2 (horizontal)3.5"Punto de partida. "Retina" desde 4 (960x640, mismo ratio).
iPhone 5 / 5s / SE 12012-2016640 x 11369:16 (0.5625) / 16:94.0"Más alto (16:9 vídeo HD). Apps letterbox al principio.
iPhone 6/7/8 / SE 2/32014-2022750 x 13349:164.7"Mismo ratio 5, más grande. Plus/Max: 1080x1920 (9:16).
iPhone X / XS / 11 Pro / 12/13/14/15 Pro2017-1125 x 2436 → 1179 x 2556 → 1290 x 2796~9:19.5 (0.462) / **~19.5:9**5.8" - 6.1"Pantalla completa, muesca/Dynamic Island. Más alto/estrecho. Notch/Isla come área.
iPhone XR / 11 / 12/13/14/15 (base)2018-828 x 1792 → 1170 x 2532~9:19.56.1"LCD (XR/11) / OLED (12+). Mismo ratio alto que Pro.
iPhone 12/13/14/15 Plus / Pro Max2020-1284 x 2778 → 1290 x 2796~9:19.56.7"Mismo ratio, más grande.

Comparativa con otros dispositivos

  • Monitor/TV estándar (antiguo): 4:3 (1.33) - Cuadrado.
  • Monitor/TV Panorámico / Portátil estándar: 16:9 (1.78) - Vídeo HD/Full HD/4K estándar.
  • Portátil productividad (MacBook, Surface, ThinkPad 16"): 16:10 (1.6) / 3:2 (1.5) - Más alto para código, docs, web.
  • iPad (Pro/Air/mini): **4:3 (1.33)** - Ideal papel, lectura, web, split view.
  • iPhone (2017+): **~19.5:9 (0.46)** - **Muy alto y estrecho.** Optimizado: Mano, bolsillo, scroll vertical (feed, chat, web), vídeo vertical (Reels/TikTok/Shorts), una mano.

Implicaciones prácticas

  • Vídeo 16:9 (YouTube, Netflix, Cine): **Barras negras arriba/abajo** (letterbox) ~20% pantalla. Zoom recorta lados.
  • Vídeo vertical 9:16 (Reels, TikTok, Stories): **Llena pantalla** (casi). Formato nativo iPhone moderno.
  • Multitarea (Split View / Slide Over): Solo iPad / iPhone plegable (futuro). iPhone: Una app a la vez (Picture in Picture vídeo).
  • Web / Lectura: Scroll vertical natural. Ancho estrecho = líneas cortas = buena legibilidad columna única.
  • Juegos: Muchos diseñados para 19.5:9. Juegos 16:9 = barras. Mandos (Backbone, Razer) alargan.

Desarrollo Apps (Puntos clave)

  • **Safe Area:** Evita muesca/Dynamic Island, barra inicio, bordes redondeados. `safeAreaLayoutGuide`.
  • **Auto Layout / SwiftUI:** Adaptable a todos ratios (3:2, 9:16, 19.5:9, iPad 4:3, Mac).
  • **Launch Screen / Iconos:** Assets para cada tamaño.