iPad Viewport Sizes: Complete Guide
This comprehensive guide provides detailed viewport sizes and screen resolutions for all iPad models. Essential information for web developers and designers working on responsive websites and applications.
Viewport Sizes Table
| Model | Viewport Size | Screen Resolution | DPR | Release Year |
|---|---|---|---|---|
| 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 10th Gen | 820 × 1180 | 1640 × 2360 | 2.0 | 2022 |
| iPad Mini (2021) | 768 × 1024 | 1536 × 2048 | 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 |
Understanding Viewport Sizes
Viewport Basics
- Viewport Size: The visible area in CSS pixels that your website can use
- Screen Resolution: The actual number of physical pixels on the device
- Device Pixel Ratio (DPR): The ratio between physical pixels and CSS pixels
- Orientation: iPad supports both portrait and landscape modes
Design Considerations
- Design for both portrait and landscape orientations
- Consider the iPad's larger screen real estate
- Optimize for touch interactions
- Use appropriate media queries for different iPad models
- Consider foldable devices