iPad Air vs iPad Pro 11-inch (2022): screen size and viewport
The iPad Air lays web pages out at 820 × 1180 CSS px with a pixel ratio of 2; the iPad Pro 11-inch (2022) at 834 × 1194 with 2. The iPad Pro 11-inch (2022) is 14 px wider and 14 px taller.
The two screens side by side
Specs compared
| Spec | iPad Air | iPad Pro 11-inch (2022) | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 820 × 1180 | 834 × 1194 | −14 px wide, −14 px tall |
| Device pixel ratio | 2 | 2 | same |
| Physical resolution | 1640 × 2360 | 1668 × 2388 | iPad Pro 11-inch (2022): 3% more pixels |
| Aspect ratio | 10:7 | 10:7 | about the same |
| Visible height, portrait, with browser bars | ~1106 px | ~1120 px | −14 px for the iPad Air |
| Landscape width (CSS px) | 1180 px | 1194 px | −14 px for the iPad Air |
| Visible height, landscape | ~746 px | ~760 px | −14 px for the iPad Air |
| First released | 2020 | 2018 | 2 years apart |
| Engine in MobileCheck | WebKit (Safari) | WebKit (Safari) | same engine |
CSS px are the units media queries see. Visible heights subtract the status bar and the Safari on iPadOS bars as set in our device profiles; real bar heights vary with settings and scrolling. The release year is that of the first model with each screen.
What this means for your layout
How the width difference affects your layout
The iPad Pro 11-inch (2022) is 14 CSS px wider (834 vs 820, 2% more). No common breakpoint falls between 820 and 834 px, so with typical media queries both get the same layout and the extra 14 pixels only stretch fluid columns, text lines and images.
In a 3-column card grid with 16 px page padding and 16 px gaps, each card is 256 px wide on the iPad Pro 11-inch (2022) and 252 px on the iPad Air. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
Both draw each CSS pixel with 2 × 2 device pixels, so text and icons are equally sharp. A full-width image (sizes="100vw") needs about 1640 px on the iPad Air and 1668 px on the iPad Pro 11-inch (2022) to look sharp.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1640w file on the iPad Air and the 2048w file on the iPad Pro 11-inch (2022). Leave out the 2048w candidate and the iPad Pro 11-inch (2022) upscales a smaller file.
How much fits above the fold
On first load about 1120 px of the page is visible on the iPad Pro 11-inch (2022) and 1106 px on the iPad Air: 14 px less (1%) on the iPad Air. That's less than one line of body text, so in practice both show the same first screen.
In landscape
Turned sideways, the iPad Air is 1180 px wide and the iPad Pro 11-inch (2022) 1194 px. The visible height drops to about 746 and 760 px, so a 64 px sticky header covers 9% and 8% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Same browser engine
Both are Apple devices, so both render with WebKit, the engine behind Safari. Engine quirks are the same; the differences above come from size alone. Chrome DevTools only emulates the size and still draws with Chromium, so check Apple devices in a WebKit browser — see how to test on an iPhone.
More about these devices
- iPad Air viewport size — one screen for the iPad 10 / A16, iPad Air 10.9" / 11"
- iPad Pro 11-inch (2022) viewport size
Or open the free check with the iPad Air and the iPad Pro 11-inch (2022) preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPad 9 vs iPad 10 — 810 vs 820 px wide, 2× vs 2×
- iPad mini vs iPad 10 — 744 vs 820 px wide, 2× vs 2×
- iPad Pro 11-inch (2022) vs iPad Pro 13-inch (M4) — 834 vs 1032 px wide, 2× vs 2×
- iPad Air vs Galaxy Tab S9 — 820 vs 800 px wide, 2× vs 2×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPad Air screen bigger than the iPad Pro 11-inch (2022)?
In CSS pixels, which decide how much of a page fits, the iPad Pro 11-inch (2022) is larger: 834 × 1194 against 820 × 1180. The iPad Pro 11-inch (2022) has more physical pixels (1668 × 2388), which makes it sharper rather than roomier.
Do I need different CSS for the iPad Air and the iPad Pro 11-inch (2022)?
Usually not. No common breakpoint falls between their widths (820 and 834 px), so a fluid layout gets the same rules on both and only stretches by 14 px.
How much of a web page is visible on the iPad Air vs the iPad Pro 11-inch (2022)?
About 820 × 1106 CSS px on the iPad Air and 834 × 1120 on the iPad Pro 11-inch (2022) when a page first opens in portrait, after the status bar and Safari on iPadOS's bars. Bar heights are our device profiles' estimates.