iPad Pro 11" (M4 & M5) viewport size

iPad Pro 11" (M4 / M5) (2024) lays web pages out at 834 × 1210 CSS pixels with a pixel ratio of 2.

Browser bars and the visible area

The viewport height is the whole screen, but Safari on iPadOS keeps part of it for its own interface. In portrait about 74 px at the top (status bar) and 0 px at the bottom (Safari's address bar and toolbar) are covered, leaving roughly 834 × 1136 CSS px for the page when it first opens. In landscape the bars take about 74 px.

That is why 100vh can be taller than what people see. Use 100svh for the smallest visible height, 100dvh for the current one, and keep the most important content and buttons within the first 1136 px.

Your screen vs the iPad Pro 11" (M4

Media queries that match the iPad Pro 11" (M4 & M5)

/* iPad Pro 11" (M4 / M5), portrait */
@media (max-width: 834px) and (orientation: portrait) { … }

/* high-density screen (2×) */
@media (min-resolution: 2dppx) { … }

Rather than targeting one device, write fluid styles and add breakpoints where your layout needs them — the same CSS then works on the 1 other device with the same width and hundreds of models with similar sizes.

Testing on the iPad Pro 11" (M4 & M5)

Apple devices render with WebKit, the engine behind Safari. Chrome's device toolbar only resizes Chromium, so fonts, form controls and toolbar behaviour can differ from a real iPad. MobileCheck renders iPads with WebKit — see how to test a website on an iPhone.

The iPad Pro 11" (M4 / M5) is one of the 54 devices in the free check.

Same viewport width

• iPad Pro 11" (2018–2022) — 834 × 1194, 2×

Similar tablets

• iPad 10 / A16, iPad Air 10.9" / 11" — 820 × 1180, 2× (2020)
• iPad 7–9 (10.2") — 810 × 1080, 2× (2019)
• Xiaomi Pad 6 — 800 × 1280, 2.25× (2023)
• Galaxy Tab A8 / A9+ — 800 × 1280, 1.5× (2021)
• Galaxy Tab S7 / S8 / S9 — 800 × 1280, 2× (2020)

Screen size comparisons

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

All mobile viewport sizes → · Compare any two devices →