Websites and web views on iPhone Duo

If you build for the web, or your app wraps web content in a WKWebView, iPhone Duo mostly asks for what good responsive sites already do.

Don’t detect iPhone Duo

Apple’s engineers say there is no way to identify iPhone Duo from the web, and that you shouldn’t try. User agent sniffing won’t help. A page sees a viewport that can change size at any moment, when the phone opens, closes or enters Split View, and it should handle that like any resize.1

• Use fluid layouts and container or media queries on width, not on device names.
• Re-measure on resize, or better, use ResizeObserver on the elements you care about.
• Keep viewport-fit=cover pages inside env(safe-area-inset-*), and handle each side on its own, because the insets are often asymmetric.
• Don’t assume portrait means narrow. The inner display is roughly square.

The foldable web APIs are experimental

Two W3C APIs describe foldables:

• Viewport Segments exposes each region of a viewport divided by a fold, through CSS environment variables such as env(viewport-segment-width 0 0) and media features such as horizontal-viewport-segments.2
• Device Posture reports whether the device is continuous or folded, through the device-posture media feature and navigator.devicePosture.3

/* Only matches when the viewport is split side by side by a fold */
@media (horizontal-viewport-segments: 2) {
  .reader {
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0) 1fr;
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
}

In iOS 27.1, Safari supports both as opt-in feature flags only: Settings > Apps > Safari > Advanced > Feature Flags.45 Visitors won’t have them turned on, and they can’t be enabled in WKWebView.1 Treat them as progressive enhancement: write the layout so it works with no segments at all, and let these queries refine it.

Native apps with web content

A WKWebView follows your native layout. If the web view fills a navigation container, it gets the right size and safe area as the app resizes. Because the foldable APIs aren’t available in web views, use native reserved regions if you need to keep native chrome around the web view clear of the fold.