Capacitor & web views on iPhone Duo

No framework-specific support needed for most cases. CSS handles the adaptation; asymmetric safe-area insets are the main trap.

iPhone Duo goes on sale 23 October 2026, running iOS 27.1. Anything you fix before then, your users never see broken. Start with what breaks first.

Capacitor iPhone Duo checklist

Capacitor, Cordova and other hybrid apps built on WKWebView are in the strongest position of any cross-platform stack, because CSS was designed for variable viewports from the start. Here is where common web-view patterns stand.

Capacitor on iPhone Duo: what works, what breaks

WorksCSS media and container queriesReflow on unfold and Split View with no JavaScript.
BreaksMissing viewport-fit=cover`env(safe-area-inset-*)` resolves to zero.
Breakspadding: 0 env(safe-area-inset-left)Applies one side’s inset to both.
WorksSeparate padding-left and padding-right insetsCorrect for asymmetric safe areas.
BreaksUser-agent layout branchingServes the phone layout to a 626 pt regular-width display.
Breaks100vh full-height layoutsMisbehaves as the viewport changes; use `100dvh`.
BreaksA cached window.innerWidthStale after a fold or a Split View resize; use `ResizeObserver`.
WorksCapacitor status bar and keyboard pluginsBehave normally on iPhone Duo.
Looks datedA tab bar drawn in HTMLStays where your CSS puts it while native bars move to the side.
Needs nativeHinge, reserved regions, scene accessoriesNo web API; needs a native plugin.

Shipping a plain website rather than a packaged app? Websites on iPhone Duo covers Safari specifically, including why it cannot detect the fold. Ionic has published no iPhone Duo guidance, so the Capacitor side of this page is our analysis.

Enable the safe area

The web view must opt into the full display before environment variables report anything useful:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Treat left and right insets as different

This is the one place where existing web code reliably breaks. A common shorthand is:

/* Wrong on iPhone Duo — assumes the two sides match */
padding: 0 env(safe-area-inset-left);

Apple’s safe areas are asymmetric on this device, so apply each side explicitly:

padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

Use container queries, not user-agent sniffing

Any code branching on a phone user agent to pick a mobile layout will serve that layout on a 626-point regular-width display. Container and media queries describe the space you actually have:

@media (min-width: 600px) {
  .layout { grid-template-columns: 260px 1fr; }
}

Handle the resize

WKWebView resizes when the device folds and when Split View changes. Layout driven by CSS handles this on its own; JavaScript that measured the viewport once does not. Prefer ResizeObserver and visualViewport events over a cached window.innerWidth.

Avoid 100vh for full-height layouts — it behaves poorly when the viewport changes under you. 100dvh tracks the dynamic viewport correctly.

What is out of reach

Reserved regions, hinge angle, and scene accessories have no web API. A Capacitor plugin wrapping the Swift APIs is possible, but for a typical content app the CSS-level adaptation above is the whole job.