iPhone Duo (closed) viewport size, resolution and safe areas

The iPhone Duo (closed) has a viewport of 466×678 CSS pixels in portrait (678×466 in landscape), a device pixel ratio (DPR) of 3 and a physical resolution of 1398×2034.

Portrait
466×678
Landscape
678×466
DPR
3
Physical
1398×2034
iPhone Duo (closed) 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, portrait466×678
Viewport, landscape678×466
Device pixel ratio (DPR)3
Physical resolution1398×2034
Status bar (top safe area)82 px
Home indicator (bottom safe area)34 px
Side safe areas, landscape82 px
Bottom safe area, landscape21 px
Safari: space taken at the top82 px
Safari: space taken at the bottom94 px
Visible viewport in Safari, portrait466×502
OSiOS
Noteouter screen; the inner one is the Duo unfolded

CSS for the iPhone Duo (closed)

Media query by width

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

/* iPhone Duo (closed): 466 CSS px in portrait, 678 in landscape */
@media (max-width: 466px) {
  /* … */
}

/* 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 Duo (closed), portrait: 82 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: 82 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 Duo (closed)

Breakpane doesn't run iOS. It's Chromium with the iPhone Duo (closed)'s viewport (466×678), 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

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.