Native resolution 1536 × 2048 px at 2× · 264 PPI · 9.7″ · 3:4. Design at 768 × 1024 and export assets at 2×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 768 × 1024 px |
| CSS viewport (landscape) | 1024 × 768 px |
| Native resolution | 1536 × 2048 px |
| Device pixel ratio | 2× |
| Pixel density | 264 PPI |
| Screen diagonal | 9.7 in |
| Panel size | 5.82 × 7.76 in |
| Aspect ratio | 3:4 |
| Total pixels | 3.15 MP |
| Released | 2014 |
| Operating system | iPadOS |
Among the 43 tablets on this site, the iPad Air 2 has the 43th largest CSS viewport area. Its 768 px width is 92 px below the 860 px average for this category.
Targeting the iPad Air 2 in CSS
Device-specific media queries are brittle — a new model with the same width will not match. Use them for genuine per-device fixes only, and prefer width buckets for layout.
/* Target iPad Air 2 specifically */
@media only screen
and (device-width: 768px)
and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 2) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 768px) { /* … */ }Compare with other iPad models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| iPad Air 2 | 768 × 1024 | 1536 × 2048 | 2× | 264 | 9.7″ |
| iPad mini (4th gen) | 768 × 1024 | 1536 × 2048 | 2× | 326 | 7.9″ |
| iPad Pro 9.7″ | 768 × 1024 | 1536 × 2048 | 2× | 264 | 9.7″ |
| iPad (5th gen) | 768 × 1024 | 1536 × 2048 | 2× | 264 | 9.7″ |
| iPad Pro 10.5″ | 834 × 1112 | 1668 × 2224 | 2× | 264 | 10.5″ |
| iPad (6th gen) | 768 × 1024 | 1536 × 2048 | 2× | 264 | 9.7″ |
| iPad Pro 11″ (1st gen) | 834 × 1194 | 1668 × 2388 | 2× | 264 | 11″ |
| iPad Pro 12.9″ (3rd) | 1024 × 1366 | 2048 × 2732 | 2× | 264 | 12.9″ |
| iPad (7th gen) | 810 × 1080 | 1620 × 2160 | 2× | 264 | 10.2″ |
Questions about the iPad Air 2 screen
What is the screen size of the iPad Air 2?
The iPad Air 2 has a 9.7-inch display. In CSS the viewport measures 768 × 1024 px in portrait, and the panel itself has 1536 × 2048 physical pixels at 264 PPI.
What resolution should I design for on the iPad Air 2?
Design at 768 × 1024 and export assets at 2×. That gives you 1536 × 2048 px images, which is exactly what the panel renders. Designing directly at 1536 × 2048 means every measurement is 2 times larger than the CSS values you will write.
What is the device pixel ratio of the iPad Air 2?
The iPad Air 2 reports a device pixel ratio of 2. One CSS pixel therefore covers 4 device pixels. You can read it in JavaScript with window.devicePixelRatio.
Which other devices have the same viewport as the iPad Air 2?
5 other devices share the 768 × 1024 CSS viewport: iPad mini (5th gen), iPad mini (4th gen), iPad (6th gen), iPad (5th gen), iPad Pro 9.7″. A layout that works on one works on all of them.
Related
window.innerWidth/innerHeight reported by the stock browser with no browser chrome. See methodology and sources.