iPad

iPad mini (A17 Pro) / 6th gen vs iPad Air 11″ (M2–M4): screen size for websites

The iPad Air 11″ (M2–M4) is 76px wider and 47px taller in CSS pixels. That’s enough for a layout that fits the iPad Air 11″ (M2–M4) to spill on the iPad mini (A17 Pro) / 6th gen.

iPad mini (A17 Pro) / 6th geniPad Air 11″ (M2–M4)
CSS viewport744 × 1133820 × 1180
Visible on first load744 × 1059 (Safari (iPadOS))820 × 1106 (Safari (iPadOS))
Device pixel ratio22
Physical resolution1488 × 22661640 × 2360
Screen size8.3″10.9″
Aspect ratio13.7:913:9
Tailwind breakpointsmmd
Bootstrap tiersmmd
Full-width image needs1488px1640px
Released20242026

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPad mini (A17 Pro) / 6th gen and iPad Air 11″ (M2–M4) at their exact sizes, next to each other.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

What the difference means for your site

Width: 744px vs 820px

Headings and buttons wrap differently: a line that fits in 820px can break onto two lines in 744px. Anything with a fixed width between the two makes the narrower screen scroll sideways (fix it).

Height: 1133px vs 1180px

On first load a page shows 1059px on the iPad mini (A17 Pro) / 6th gen and 1106px on the iPad Air 11″ (M2–M4), so “above the fold” differs by 47px.

Questions people ask

Is the iPad mini (A17 Pro) / 6th gen screen bigger than the iPad Air 11″ (M2–M4) for websites?

The iPad Air 11″ (M2–M4) is 76px wider and 47px taller in CSS pixels. That’s enough for a layout that fits the iPad Air 11″ (M2–M4) to spill on the iPad mini (A17 Pro) / 6th gen.

What are the viewport sizes of the iPad mini (A17 Pro) / 6th gen and iPad Air 11″ (M2–M4)?

iPad mini (A17 Pro) / 6th gen: 744 × 1133 CSS px (DPR 2). iPad Air 11″ (M2–M4): 820 × 1180 CSS px (DPR 2).

Do I need to test my site on both?

Yes if your layout has anything close to 820px wide. Test the narrower one first: it’s where things spill.

More comparisons