Tamaños de Viewport iPhone: Guía Completa
Esta guía completa proporciona tamaños de viewport y resoluciones de pantalla detallados para todos los modelos iPhone. Información esencial para desarrolladores y diseñadores web que trabajan en sitios y aplicaciones responsive.
Estado de datos: Última actualización: 2026-02-08 (UTC)
Fuentes: Páginas oficiales de especificaciones de Apple, Google y Samsung
Método: Los valores de iPhone y iPad se calculan principalmente como resolución dividida por DPR. El viewport CSS y el DPR en Android pueden variar por escala de pantalla, interfaz del navegador y ajustes del sistema.
Tabla de Tamaños de Viewport
| Modelo | Tamaño de Viewport | Resolución de Pantalla | DPR | Año de Lanzamiento |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
Entendiendo los Tamaños de Viewport
Fundamentos del Viewport
Al diseñar para dispositivos, es importante entender la diferencia entre tamaños de viewport y resoluciones de pantalla:
- Tamaño del Viewport: El área visible en píxeles CSS que tu sitio web puede usar
- Resolución de Pantalla: El número real de píxeles físicos en el dispositivo
- Relación de Píxeles del Dispositivo (DPR): La proporción entre píxeles físicos y píxeles CSS
Consideraciones de Diseño
- Usa técnicas de diseño responsive
- Prueba en múltiples modelos de iPhone
- Considera las áreas del notch y el indicador de inicio
- Optimiza para diferentes orientaciones
- Usa media queries apropiadas
Implementación Técnica
- Implementa etiquetas meta viewport correctas
- Usa CSS media queries efectivamente
- Considera los safe area insets
- Optimiza para diferentes valores de DPR
Preguntas frecuentes sobre viewports de dispositivos
El tamaño de viewport es el área en píxeles CSS que usa tu diseño, mientras que la resolución es el número de píxeles físicos del dispositivo. Se relacionan por el DPR, pero la interfaz del navegador y la escala pueden cambiar el viewport efectivo.
Valores de DPR diferentes, escalado del sistema y comportamiento del navegador pueden producir anchos de viewport CSS distintos aunque la resolución física sea parecida.
Úsala como referencia de dispositivos reales, pero define breakpoints por comportamiento del contenido, no por un solo modelo. Prueba rangos clave como 360, 390, 412, 768, 820, 834 y 1024 píxeles CSS.
Los plegables cambian entre pantalla externa e interna con proporciones de viewport muy distintas. Prueba ambos estados y rotación, y evita fijar el layout a un único ancho.
Actualizamos estos datos tras lanzamientos importantes y cambios de especificaciones. Para casos críticos en producción, verifica siempre en dispositivos reales o laboratorios en la nube.