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.

Tabla de Tamaños de Viewport

Modelo Tamaño de Viewport Resolución de Pantalla DPR Año de Lanzamiento
iPad Pro 12.9" (2024) 1024 × 1366 2048 × 2732 2.0 2024
iPad Pro 11" (2024) 834 × 1194 1668 × 2388 2.0 2024
iPad Air (2024) 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 Air (2022) 820 × 1180 1640 × 2360 2.0 2022
iPad 10ª Gen 820 × 1180 1640 × 2360 2.0 2022
iPad Mini (2021) 768 × 1024 1536 × 2048 2.0 2021
iPad 9ª 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 8ª 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