/iphone-duo-dual-pane-patterns

name: iphone-duo-dual-pane-patterns
description: Design and build two-pane experiences for iPhone Duo — the real pixel and point dimensions of each display and each half, the exact hinge callback types (onHingeChange / UIHingeInteraction), hinge-driven effects, pose-to-pattern mapping (companion pane, dual view, list-detail, tabletop controls), two-pane paywalls and fold-aware onboarding. Use when sizing a layout or asset for iPhone Duo, wiring a hinge callback, choosing what goes in each pane, or designing onboarding and purchase flows that span the fold.

Dual-pane patterns, dimensions and hinge callbacks

The sibling skills explain the platform: reserved regions and arrangements in `../iphone-duo-adaptive-layout/SKILL.md`, the hinge and scenes in `../iphone-duo-hinge-and-scenes/SKILL.md`, design principles in `../iphone-duo-design-review/SKILL.md`. This one is the **applied** layer: the numbers you'll want when mocking up or sizing assets, the exact shapes of the hinge callbacks, and the proven patterns for what to put in each pane — drawn from Apple's material plus a decade of dual-screen guidance from Microsoft (Surface Duo), Google (Android foldables) and Samsung (Flex Mode), which all converge on the same answers.

The numbers

From Apple's published specs. Use them for mockups, asset budgets and sanity checks — **never** as layout constants. Layout reads size class, safe area and reserved regions at runtime.

| | Outer display | Inner display (open) | Each half of the inner display | |---|---|---|---| | Diagonal | 5.4 in | 7.6 in | — | | Points (w × h, as held) | **466 × 678** portrait | **951 × 669** landscape | **475.5 × 669** portrait | | Pixels (w × h, as held) | **1398 × 2034** portrait | **2670 × 1878** landscape | **≈1335 × 1878** portrait | | Density | 460 ppi | 430 ppi | 430 ppi | | Aspect ratio | ≈1.45 : 1 (tall) | ≈1.42 : 1 (wide) | ≈1.41 : 1 (tall) | | Size class | compact × regular (portrait), compact × compact (landscape) | regular × regular, any orientation | — |

Apple lists the inner panel as "1878-by-2670"; open, the device is wider than tall (164.6 × 117.8 mm), so the natural open posture is **landscape**.

Three consequences worth internalising:

1. **The inner display is the outer display turned sideways**, near enough. Both are ≈1.4–1.45 : 1, which is why Apple describes them as sharing one aspect ratio. 2. **Each half of the inner display is roughly one outer display.** A phone-shaped UI fits one half; the other half is *additional*. That is the whole design thesis: one familiar pane plus one extra pane, not one stretched phone UI. 3. **The fold runs down the middle of the long edge** when open, so default two-pane layouts are side by side, and tabletop layouts are top/bottom.

Points

Apple's Tech Specs list pixels only. The point sizes come from the iPhone Duo templates in Apple's **iOS and iPadOS 27 design resource** (as reproduced in Noah Elhadedy's community *iPhone Duo Adaptive Design Starter Kit*, aligned to Apple's templates on 23 September 2026):

• Outer: **466 × 678 pt** — exactly the 1398 × 2034 panel at 3×.
• Inner: **951 × 669 pt** (669 × 951 in portrait). That is **not** an exact 3×

of the 2670 × 1878 panel: the system renders at 2853 × 2007 (the App Store Connect screenshot size) and downsamples, like iPhone 6 Plus did. Export inner-display assets at 3× of the point size, not from the panel pixels.

• The fold sits at **475.5 pt** from the edge — the centre of 951 — in both

orientations.

Still confirm in the Xcode 27.1 simulator; read `GeometryProxy.size` or scene bounds rather than hardcoding any of this.

Layout tokens (pt)

For mockups and for sanity-checking what the system gives you at runtime. The **Source** column matters: only *Apple* values come from Apple's design resource; *kit* values are design choices from the community starter kit that you're free to change.

**Safe areas** — asymmetric by design; never mirror one side onto the other.

| State | Top | Bottom | Leading | Trailing | Safe content size | Source | |---|---|---|---|---|---|---| | Outer portrait | 0 | 0 | 0 | **84** (vertical bar) | 382 × 678 | Apple | | Outer landscape | 0 | 0 | 0 | **84**, on the camera edge | 594 × 466 | Apple | | Inner landscape (flat or book) | 0 | 0 | 0 | **84** (vertical bar) | 867 × 669 | Apple | | Inner portrait (flat or tabletop) | **84** (status + top bar) | **95** (tab bar) | 0 | 0 | 669 × 772 | Apple |

Horizontal bars return **only** on the inner display in portrait. Everywhere else, navigation, toolbar and tab bar share one 84 pt vertical bar in the order back → prominent action → toolbar groups → tab bar, top to bottom.

**Bars and controls**

| Element | Size | Source | |---|---|---| | Vertical bar width | 84 pt | Apple | | Horizontal navigation bar / toolbar (inner portrait) | 48 pt tall | Apple | | Horizontal tab bar (inner portrait) | 95 pt tall inset | Apple | | Bar button / prominent bar button | 36 pt / 48 pt | Apple | | Touch target | 44 × 44 pt default, 28 × 28 pt minimum | Apple HIG |

**Margins, gaps, fold**

| Token | Value | Source | |---|---|---| | Layout margin, both displays | 20 pt | Apple | | Division region width when flat | 0 pt | Apple | | Division region width when folded | not published — read `ReservedRegion.frame` | — | | Fold avoidance band (mockups) | 27 pt, centred on 475.5 pt | kit | | Gap between panes | 16 pt outer, 24 pt inner | kit | | Max width for running text | 600 pt | kit |

**Columns** — Apple asks for an even count; the counts themselves are kit values.

| State | Columns | Gutter | |---|---|---| | Outer portrait | 4 | 16 | | Outer landscape | 6 | 16 | | Inner portrait | 6 | 24 | | Inner landscape | 8 | 24 | | Inner, book-folded | 4 + 4, meeting at the fold, none on it | 24 |

**Typical pane widths** inside the 867 pt inner-landscape safe area (kit): list 300–320 + detail 546–566; sidebar 280; player/primary ≈462 (one half) + context ≈404. Keep a pane's