iPad mini vs iPad 10: screen size and viewport

The iPad mini lays web pages out at 744 × 1133 CSS px with a pixel ratio of 2; the iPad 10 at 820 × 1180 with 2. The iPad 10 is 76 px wider and 47 px taller.

The two screens side by side

Specs compared

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 76 CSS px wider (820 vs 744, 10% more). One common breakpoint falls between them: (min-width: 768px) (Bootstrap and Tailwind md) matches the iPad 10 but not the iPad mini, so a rule written for that width applies on only one of the two.

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 226 px on the iPad mini. 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 1488 px on the iPad mini 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 mini 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 1059 px on the iPad mini: 47 px less (4%) on the iPad mini, roughly 1 line 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 mini. Keep the headline and the main action within the first 1059 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.

Relative to its width, the iPad mini has the taller screen (3:2 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 mini is 1133 px wide and the iPad 10 1180 px. The visible height drops to about 670 and 746 px, so a 64 px sticky header covers 10% 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 mini viewport size — one screen for the iPad mini 6 / 7
• iPad 10 viewport size — one screen for the iPad 10 / A16, iPad Air 10.9" / 11"

Or open the free check with the iPad mini and the iPad 10 preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.

Related comparisons

• Galaxy Z Fold 5 unfolded vs iPad mini — 690 vs 744 px wide, 2.625× vs 2×
• iPhone 16 Pro Max vs iPad mini — 440 vs 744 px wide, 3× vs 2×
• iPad 9 vs iPad 10 — 810 vs 820 px wide, 2× vs 2×
• iPad Air vs iPad Pro 11-inch (2022) — 820 vs 834 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 →