iPad 9 vs iPad 10: screen size and viewport
The iPad 9 lays web pages out at 810 × 1080 CSS px with a pixel ratio of 2; the iPad 10 at 820 × 1180 with 2. The iPad 10 is 10 px wider and 100 px taller.
The two screens side by side
Specs compared
| Spec | iPad 9 | iPad 10 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 810 × 1080 | 820 × 1180 | −10 px wide, −100 px tall |
| Device pixel ratio | 2 | 2 | same |
| Physical resolution | 1620 × 2160 | 1640 × 2360 | iPad 10: 11% more pixels |
| Aspect ratio | 4:3 | 10:7 | iPad 10 is taller |
| Visible height, portrait, with browser bars | ~1006 px | ~1106 px | −100 px for the iPad 9 |
| Landscape width (CSS px) | 1080 px | 1180 px | −100 px for the iPad 9 |
| Visible height, landscape | ~736 px | ~746 px | −10 px for the iPad 9 |
| First released | 2019 | 2020 | 1 year 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 10 is 10 CSS px wider (820 vs 810, 1% more). No common breakpoint falls between 810 and 820 px, so with typical media queries both get the same layout and the extra 10 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 252 px wide on the iPad 10 and 248 px on the iPad 9. 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 1620 px on the iPad 9 and 1640 px on the iPad 10 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 9 and the same one on the iPad 10.
How much fits above the fold
On first load about 1106 px of the page is visible on the iPad 10 and 1006 px on the iPad 9: 100 px less (10%) on the iPad 9, roughly 4 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the iPad 10, it can end up below it on the iPad 9. Keep the headline and the main action within the first 1006 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
Relative to its width, the iPad 10 has the taller screen (4:3 vs 10:7), so the same content is laid out narrower but more of its length fits at once.
In landscape
Turned sideways, the iPad 9 is 1080 px wide and the iPad 10 1180 px. The visible height drops to about 736 and 746 px, so a 64 px sticky header covers 9% and 9% 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 9 viewport size
- iPad 10 viewport size — one screen for the iPad 10 / A16, iPad Air 10.9" / 11"
Or open the free check with the iPad 9 and the iPad 10 preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPad Air vs iPad Pro 11-inch (2022) — 820 vs 834 px wide, 2× vs 2×
- iPad mini vs iPad 10 — 744 vs 820 px wide, 2× vs 2×
- iPad Air vs Galaxy Tab S9 — 820 vs 800 px wide, 2× vs 2×
- iPad 9 vs Galaxy Tab A9+ — 810 vs 800 px wide, 2× vs 1.5×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPad 9 screen bigger than the iPad 10?
In CSS pixels, which decide how much of a page fits, the iPad 10 is larger: 820 × 1180 against 810 × 1080. The iPad 10 has more physical pixels (1640 × 2360), which makes it sharper rather than roomier.
Do I need different CSS for the iPad 9 and the iPad 10?
Usually not. No common breakpoint falls between their widths (810 and 820 px), so a fluid layout gets the same rules on both and only stretches by 10 px.
How much of a web page is visible on the iPad 9 vs the iPad 10?
About 810 × 1006 CSS px on the iPad 9 and 820 × 1106 on the iPad 10 when a page first opens in portrait, after the status bar and Safari on iPadOS's bars. Bar heights are our device profiles' estimates.