Los iPhone actuales tienen pantallas de 6,1 a 6,9 pulgadas, con viewports CSS de 390 a 440 píxeles de ancho. El iPhone 18 Pro y el iPhone 17 tienen una pantalla de 6,3 pulgadas y un viewport de 402 × 874; el iPhone 18 Pro Max y el 17 Pro Max, una pantalla de 6,9 pulgadas y un viewport de 440 × 956; el iPhone 17e, una pantalla de 6,1 pulgadas y un viewport de 390 × 844. La tabla de abajo recoge todos los modelos hasta el primer iPhone SE.
Cómo leer la tabla
- Pantalla es la diagonal en pulgadas, tal como la indica Apple. En los modelos con esquinas redondeadas, el área visible real es algo menor.
- Resolución es el número de píxeles físicos de la pantalla, en vertical.
- Viewport CSS es lo que ve una página web en Safari en vertical con una etiqueta meta viewport correcta: la resolución dividida entre la densidad de píxeles. Es el número que debes usar en diseño responsive y media queries.
- Densidad de píxeles (DPR) indica cuántos píxeles físicos forman un píxel CSS en cada dirección.
Tabla de tamaños de pantalla del iPhone (2016–2026)
| Modelo | Año | Pantalla | Resolución | Viewport CSS | Densidad de píxeles |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6,5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3.ª generación) | 2022 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2.ª generación) | 2020 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1.ª generación) | 2016 | 4,0” | 640 × 1136 | 320 × 568 | 2 |
* Los modelos Plus renderizan a 1242 × 2208 y lo reducen al panel de 1080 × 1920, por lo que la densidad informada es 3 mientras que la física ronda 2,6. Los iPhone 12 mini y 13 mini también renderizan un viewport de 375 px en un panel algo más pequeño del que necesitaría un 3x.
Fuentes: las especificaciones técnicas de Apple de cada modelo (tamaño de pantalla y resolución); los valores de viewport son la resolución dividida entre la densidad de píxeles. Consulta la página de especificaciones de Apple para los modelos más nuevos, porque Apple añade modelos cada año.
Los anchos de viewport que de verdad necesitan los diseñadores web
De todos esos modelos, solo unos pocos anchos importan para el diseño:
| Ancho CSS | Modelos |
|---|---|
| 375 px | SE (2.ª y 3.ª generación), 8, modelos mini, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Modelos Plus y Pro Max |
Si tu diseño funciona de forma fluida entre 375 y 440 px, funciona en todos los iPhone vendidos en los últimos ocho años. Prueba también 320 px si quieres ir sobre seguro con dispositivos antiguos y texto ampliado. Para todo lo que queda entre los teléfonos y por encima, consulta breakpoints responsive.
¿Qué iPhone tiene la pantalla más grande y la más pequeña?
Las pantallas más grandes son las de los Pro Max de 6,9 pulgadas: iPhone 16 Pro Max, 17 Pro Max y 18 Pro Max. La pantalla más pequeña de la generación actual mide 6,1 pulgadas (iPhone 16e y 17e). El iPhone más pequeño con diseño moderno sin marcos fue el iPhone 13 mini de 5,4 pulgadas, y el más pequeño de toda la tabla es el primer iPhone SE de 4 pulgadas.
Cómo usar estos tamaños para probar una web
Para ver tu web en un ordenador con el tamaño exacto de un iPhone necesitas el viewport y la densidad de píxeles y el user agent, no solo una ventana estrecha. Dos opciones:
- El modo dispositivo de Chrome DevTools: elige un preajuste de iPhone, o haz clic en Edit y añade un dispositivo personalizado con el ancho, el alto y la densidad de píxeles de la tabla. Consulta la guía del emulador móvil de Chrome.
- Una extensión de vista móvil con perfiles de iPhone. Mobile View Extension recarga la pestaña dentro de un marco de iPhone con el user agent, el tamaño de pantalla y la densidad de píxeles correspondientes, y admite resoluciones personalizadas si falta algún modelo.
Ambas opciones renderizan con el motor de Chrome. Para el comportamiento propio de Safari, usa el simulador de Xcode o un iPhone real, como explicamos en cómo probar una web en iPhone sin iPhone.
Preguntas frecuentes
¿Cuál es el tamaño del viewport del iPhone 17?
402 × 874 píxeles CSS con una densidad de 3, en una pantalla de 6,3 pulgadas de 1206 × 2622 píxeles. El iPhone 17 Pro y el iPhone 18 Pro tienen los mismos valores.
¿Para qué tamaño de pantalla debo diseñar en iPhone?
Diseña layouts fluidos que funcionen entre 375 y 440 px de ancho. Usa 390 o 393 px como iPhone de tamaño medio en los mockups y revisa 375 y 440 px antes del lanzamiento.
¿Por qué el viewport del iPhone es menor que su resolución?
Cada píxel CSS se dibuja con dos o tres píxeles físicos por lado para que el texto se vea nítido. El viewport es la resolución dividida entre esa densidad. Más en qué es el viewport.