iPad

iPad Pro 11″ (M4/M5) vs iPad Pro 13″ (M4/M5): screen size for websites

The iPad Pro 13″ (M4/M5) is 198px wider and 166px taller in CSS pixels. That’s enough for a layout that fits the iPad Pro 13″ (M4/M5) to spill on the iPad Pro 11″ (M4/M5).

iPad Pro 11″ (M4/M5)iPad Pro 13″ (M4/M5)
CSS viewport834 × 12101032 × 1376
Visible on first load834 × 1136 (Safari (iPadOS))1032 × 1302 (Safari (iPadOS))
Device pixel ratio22
Physical resolution1668 × 24202064 × 2752
Screen size11.1″13″
Aspect ratio13.1:93:4
Tailwind breakpointmdlg
Bootstrap tiermdlg
Full-width image needs1668px2064px
Released20252025

See your site on both, side by side

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

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

Height: 1210px vs 1376px

On first load a page shows 1136px on the iPad Pro 11″ (M4/M5) and 1302px on the iPad Pro 13″ (M4/M5), so “above the fold” differs by 166px.

Questions people ask

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

The iPad Pro 13″ (M4/M5) is 198px wider and 166px taller in CSS pixels. That’s enough for a layout that fits the iPad Pro 13″ (M4/M5) to spill on the iPad Pro 11″ (M4/M5).

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

iPad Pro 11″ (M4/M5): 834 × 1210 CSS px (DPR 2). iPad Pro 13″ (M4/M5): 1032 × 1376 CSS px (DPR 2).

Do I need to test my site on both?

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

More comparisons