iPad Air 11″ viewport size, resolution and safe areas

The iPad Air 11″ has a viewport of 820×1180 CSS pixels in portrait (1180×820 in landscape), a device pixel ratio (DPR) of 2 and a physical resolution of 1640×2360.

Portrait
820×1180
Landscape
1180×820
DPR
2
Physical
1640×2360
iPad Air 11″ in Breakpane, App mode, with Lume open and the viewport dimension lines
Breakpane capture in App mode (installed PWA). The dimension lines show the viewport the page measured inside the device; system bars that stay reserved are not counted.

Measurements

Viewport, portrait820×1180
Viewport, landscape1180×820
Device pixel ratio (DPR)2
Physical resolution1640×2360
Status bar (top safe area)24 px
Home indicator (bottom safe area)20 px
Bottom safe area, landscape20 px
Safari: space taken at the top74 px
Visible viewport in Safari, portrait820×1106
OSiPadOS
Notesame screen as the iPad (10th/11th gen)

CSS for the iPad Air 11″

Media query by width

Breakpoints are written in CSS pixels, never in physical resolution.

/* iPad Air 11″: 820 CSS px in portrait, 1180 in landscape */
@media (max-width: 820px) {
  /* … */
}

/* screens with a DPR of 2 or more */
@media (min-resolution: 2dppx) {
  /* 2x images */
}

Safe areas with env()

With viewport-fit=cover, the page runs to the edge and the system hands over the safe areas through env(). In the installed app, the top only becomes an inset with the black-translucent status bar; in Safari, the browser bars cover those strips.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

/* iPad Air 11″, portrait: 24 px at the top and 20 px at the bottom */
.header { padding-top: env(safe-area-inset-top); }
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

How Breakpane emulates the iPad Air 11″

Breakpane doesn't run iPadOS. It's Chromium with the iPad Air 11″'s viewport (820×1180), density (2), user agent, touch, safe areas and display-mode, inside a frame with the real dimensions, floating in front of your editor with your dev server live.

It covers layout, safe areas and the installed PWA. WebKit rendering or API bugs only show up on a real device or in the Xcode Simulator.

More devices: Tablets

All devices

Measurements from Breakpane's device catalog, checked against public sources (the Chrome DevTools device list, useyourloaf.com, deviceatlas.com, yesviz.com, webmobilefirst.com and 1440px.com) between Oct 2, 2026 and Oct 5, 2026.