iPad Pro 11-inch (M4) vs iPad Pro 13-inch (M4): screen size and viewport

The iPad Pro 11-inch (M4) lays web pages out at 834 × 1210 CSS px with a pixel ratio of 2; the iPad Pro 13-inch (M4) at 1032 × 1376 with 2. The iPad Pro 13-inch (M4) is 198 px wider and 166 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 Pro 13-inch (M4) is 198 CSS px wider (1032 vs 834, 24% more). 3 common breakpoints fall between them: (min-width: 840px) (Material 3 expanded window), (min-width: 992px) (Bootstrap lg), (min-width: 1024px) (Tailwind lg) match the iPad Pro 13-inch (M4) but not the iPad Pro 11-inch (M4), 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 322 px wide on the iPad Pro 13-inch (M4) and 256 px on the iPad Pro 11-inch (M4). 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 1668 px on the iPad Pro 11-inch (M4) and 2064 px on the iPad Pro 13-inch (M4) to look sharp.

With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 2048w file on the iPad Pro 11-inch (M4) and the 2560w file on the iPad Pro 13-inch (M4). Leave out the 2560w candidate and the iPad Pro 13-inch (M4) upscales a smaller file.

How much fits above the fold

On first load about 1302 px of the page is visible on the iPad Pro 13-inch (M4) and 1136 px on the iPad Pro 11-inch (M4): 166 px less (15%) on the iPad Pro 11-inch (M4), roughly 6 lines of 16 px body text at a 1.5 line height.

If your main button sits just above the fold on the iPad Pro 13-inch (M4), it can end up below it on the iPad Pro 11-inch (M4). Keep the headline and the main action within the first 1136 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.

Relative to its width, the iPad Pro 11-inch (M4) has the taller screen (10:7 vs 4:3), so the same content is laid out narrower but more of its length fits at once.

In landscape

Turned sideways, the iPad Pro 11-inch (M4) is 1210 px wide and the iPad Pro 13-inch (M4) 1376 px; (min-width: 1280px) matches only the iPad Pro 13-inch (M4) in landscape. The visible height drops to about 760 and 958 px, so a 64 px sticky header covers 8% and 7% 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 Pro 11-inch (M4) viewport size — one screen for the iPad Pro 11" (M4 / M5)
• iPad Pro 13-inch (M4) viewport size — one screen for the iPad Pro 13" (M4 / M5)

Or open the free check with the iPad Pro 11-inch (M4) and the iPad Pro 13-inch (M4) preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.

Related comparisons

• iPad Pro 11-inch (2022) vs iPad Pro 13-inch (M4) — 834 vs 1032 px wide, 2× vs 2×
• iPad Pro 12.9-inch vs iPad Pro 13-inch M4 — 1024 vs 1032 px wide, 2× vs 2×

Compare other devices → · All mobile viewport sizes →