iPhone 17 Pro Max viewport size, resolution and safe areas
The iPhone 17 Pro Max has a viewport of 440×956 CSS pixels in portrait (956×440 in landscape), a device pixel ratio (DPR) of 3 and a physical resolution of 1320×2868.
- Portrait
- 440×956
- Landscape
- 956×440
- DPR
- 3
- Physical
- 1320×2868
Measurements
| Viewport, portrait | 440×956 |
|---|---|
| Viewport, landscape | 956×440 |
| Device pixel ratio (DPR) | 3 |
| Physical resolution | 1320×2868 |
| Status bar (top safe area) | 62 px |
| Home indicator (bottom safe area) | 34 px |
| Side safe areas, landscape | 62 px |
| Bottom safe area, landscape | 21 px |
| Safari: space taken at the top | 62 px |
| Safari: space taken at the bottom | 94 px |
| Visible viewport in Safari, portrait | 440×800 |
| OS | iOS |
| Note | same screen as the iPhone 18 Pro Max |
CSS for the iPhone 17 Pro Max
Media query by width
Breakpoints are written in CSS pixels, never in physical resolution.
/* iPhone 17 Pro Max: 440 CSS px in portrait, 956 in landscape */
@media (max-width: 440px) {
/* … */
}
/* screens with a DPR of 3 or more */
@media (min-resolution: 3dppx) {
/* 3x 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">
/* iPhone 17 Pro Max, portrait: 62 px at the top and 34 px at the bottom */
.header { padding-top: env(safe-area-inset-top); }
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* landscape: 62 px on the sides and 21 px at the bottom */
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}How Breakpane emulates the iPhone 17 Pro Max
Breakpane doesn't run iOS. It's Chromium with the iPhone 17 Pro Max's viewport (440×956), density (3), 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: iPhone
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.