iPad

iPad Air 11″ (M2–M4) vs iPad Pro 11″ (M4/M5): screen size for websites

The iPad Pro 11″ (M4/M5) is 14px wider and 30px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 820 and 834px will spill on the narrower one.

iPad Air 11″ (M2–M4)iPad Pro 11″ (M4/M5)
CSS viewport820 × 1180834 × 1210
Visible on first load820 × 1106 (Safari (iPadOS))834 × 1136 (Safari (iPadOS))
Device pixel ratio22
Physical resolution1640 × 23601668 × 2420
Screen size10.9″11.1″
Aspect ratio13:913.1:9
Tailwind breakpointmdmd
Bootstrap tiermdmd
Full-width image needs1640px1668px
Released20262025

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPad Air 11″ (M2–M4) and iPad Pro 11″ (M4/M5) 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: 820px vs 834px

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

Height: 1180px vs 1210px

On first load a page shows 1106px on the iPad Air 11″ (M2–M4) and 1136px on the iPad Pro 11″ (M4/M5), so “above the fold” differs by 30px.

Questions people ask

Is the iPad Air 11″ (M2–M4) screen bigger than the iPad Pro 11″ (M4/M5) for websites?

The iPad Pro 11″ (M4/M5) is 14px wider and 30px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 820 and 834px will spill on the narrower one.

What are the viewport sizes of the iPad Air 11″ (M2–M4) and iPad Pro 11″ (M4/M5)?

iPad Air 11″ (M2–M4): 820 × 1180 CSS px (DPR 2). iPad Pro 11″ (M4/M5): 834 × 1210 CSS px (DPR 2).

Do I need to test my site on both?

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

More comparisons