iPad 视口尺寸完整指南
这份综合指南提供了所有iPad机型的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。
视口尺寸表
机型 | 视口尺寸 | 屏幕分辨率 | DPR | 发布年份 |
---|---|---|---|---|
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 |
理解视口尺寸
视口基础知识
- 视口尺寸: 您的网站可以使用的CSS像素可见区域
- 屏幕分辨率: 设备上实际的物理像素数量
- 设备像素比 (DPR): 物理像素与CSS像素之间的比率
- 方向: iPad支持竖屏和横屏两种模式
设计考虑
- 为竖屏和横屏方向设计
- 考虑iPad更大的屏幕空间
- 针对触摸交互进行优化
- 为不同iPad机型使用适当的媒体查询
- 考虑可折叠设备