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.
Tabla de Tamaños de Viewport
| Modelo | Tamaño de Viewport | Resolución de Pantalla | DPR | Año de Lanzamiento |
|---|---|---|---|---|
| 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 | 390 × 844 | 1170 × 2532 | 3 | 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
Recursos Relacionados
Cargando...