# Capacitor & web views on iPhone Duo

> Web-based iOS apps adapt well to iPhone Duo if they use CSS environment variables correctly and treat the viewport as genuinely variable.

Source: https://iphoneduosupport.com/frameworks/capacitor/

Support status: none
No framework-specific support needed for most cases. CSS handles the adaptation; asymmetric safe-area insets are the main trap.
Last verified: 2026-09-09

---

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:

```html
<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:

```css
/* 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:

```css
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:

```css
@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.

---

Published by iPhone Duo Support (https://iphoneduosupport.com). Not affiliated with Apple Inc.