Tamaños de Viewport iPad: Guía Completa
Esta guía completa proporciona tamaños de viewport y resoluciones de pantalla detallados para todos los modelos iPad. 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 |
|---|---|---|---|---|
| iPad Air 13" (M3) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2025 |
| iPad Air 11" (M3) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad (A16) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad mini (A17 Pro) | 744 × 1133 | 1488 × 2266 | 2.0 | 2024 |
| iPad Pro 13" (M4) | 1032 × 1376 | 2064 × 2752 | 2.0 | 2024 |
| iPad Pro 11" (M4) | 834 × 1210 | 1668 × 2420 | 2.0 | 2024 |
| iPad Air 13" (M2) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2024 |
| iPad Air 11" (M2) | 820 × 1180 | 1640 × 2360 | 2.0 | 2024 |
| iPad Pro 12.9" (2022) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2022 |
| iPad Pro 11" (2022) | 834 × 1194 | 1668 × 2388 | 2.0 | 2022 |
| iPad 10th Gen | 820 × 1180 | 1640 × 2360 | 2.0 | 2022 |
| iPad mini (2021) | 744 × 1133 | 1488 × 2266 | 2.0 | 2021 |
| iPad 9th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2021 |
| iPad Pro 12.9" (2021) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2021 |
| iPad Pro 11" (2021) | 834 × 1194 | 1668 × 2388 | 2.0 | 2021 |
| iPad Air (2020) | 820 × 1180 | 1640 × 2360 | 2.0 | 2020 |
| iPad 8th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2020 |
| iPad Pro 12.9" (2020) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2020 |
| iPad Pro 11" (2020) | 834 × 1194 | 1668 × 2388 | 2.0 | 2020 |
| iPad 7th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2019 |
| iPad Air (2019) | 834 × 1112 | 1668 × 2224 | 2.0 | 2019 |
| iPad mini (2019) | 768 × 1024 | 1536 × 2048 | 2.0 | 2019 |
| iPad Pro 12.9" (2018) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2018 |
| iPad Pro 11" (2018) | 834 × 1194 | 1668 × 2388 | 2.0 | 2018 |
| iPad 6th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2018 |
| iPad Pro 10.5" | 834 × 1112 | 1668 × 2224 | 2.0 | 2017 |
| iPad Pro 12.9" (2017) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2017 |
| iPad 5th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2017 |
| iPad Pro 9.7" | 768 × 1024 | 1536 × 2048 | 2.0 | 2016 |
| iPad Pro 12.9" (2015) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2015 |
| iPad mini 4 | 768 × 1024 | 1536 × 2048 | 2.0 | 2015 |
| iPad Air 2 | 768 × 1024 | 1536 × 2048 | 2.0 | 2014 |
Entendiendo los Tamaños de Viewport
Fundamentos del Viewport
- 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
- Orientación: iPad soporta tanto modo vertical como horizontal
Consideraciones de Diseño
- Diseña para orientaciones vertical y horizontal
- Considera el mayor espacio de pantalla del iPad
- Optimiza para interacciones táctiles
- Usa media queries apropiadas para diferentes modelos de iPad
- Considera dispositivos plegables
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.