Capacitor, Cordova, and 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. Ionic has published no iPhone Duo guidance; what follows 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.