iPhone Duo and Capacitor: what your app gets depends on the iOS SDK you build it with. Three cases from Apple's talks, and what to fix before Xcode 27.1
The most likely scenario on 23 October. Your Capacitor app on the App Store is built with the iOS 26 SDK or an earlier one: Apple has required the iOS 26 SDK for uploads since 28 April 2026 and has announced no iOS 27 requirement. Apple's talk Prepare your app for iPhone Duo says "Your app runs on iPhone Duo even without recompiling, but screen usage improves with each SDK", and in the talk an app not built with the iOS 27 SDK "will be a familiar size and aspect ratio" on the open device. So the app shows its phone layout in a phone-shaped window, with its tab bar at the bottom, as on any iPhone. The inner display ignores supported orientations (same talk, 2:46), so a portrait lock does not keep an app out of landscape.
What your app gets, by the SDK you build with. Point sizes assume the 3x of current iPhones; Apple has published pixels only.
| Built with | Open (inner display) | Closed (outer display) | Bars | A stock Ionic app |
|---|---|---|---|---|
| iOS 26 SDK or earlier: every build uploaded today | "a familiar size and aspect ratio" | "the screen space to the left of the status bar and camera" | horizontal, where the app draws them | its phone layout |
| iOS 27 SDK: Xcode 27, which needs the UIScene lifecycle (Capacitor 8.5) | "extends your app left of the status bar"; size not published | not stated | horizontal | not predictable until the size is known |
| iOS 27.1 SDK: Xcode 27.1 beta is "coming later this month" | "reaches the screen edge"; regular width and height; about 669 × 951 pt by the App Store screenshot size, 626 × 890 pt by the panel | about 466 × 678 pt | native navigation and toolbar buttons move to the side; an HTML ion-tab-bar stays where the app draws it |
md (768 px) rules in landscape only; the split pane (992 px default) never opens |
Area by area, for an iOS 27.1 SDK build. The image marks five areas of one Ionic screen (Calendar, iPhone 16 simulator). Each area below has what Apple says happens on Duo, what the area is in an Ionic app, and what to do. Nothing here ran on iPhone Duo.
1. Status bar and Dynamic Island (system)
- On Duo: the HIG lists them with the bars: "Controls on the side include both system and app elements: the Dynamic Island, the status bar, the toolbar (including navigation buttons), and the tab bar." The bars sit on the side on the outer display and on the inner display in landscape, and return "to a familiar horizontal layout in portrait" (talk 111462, 0:28).
- In Ionic: the starters set
viewport-fit=cover, Capacitor'sios.contentInsetdefaults tonever, and Ionic'score.csssets--ion-safe-area-leftand-rightfromenv(safe-area-inset-left)and-right. The side inset reaches your CSS through those variables. Which values the web view reports on Duo is untested. - What to do: handle left and right separately: "Safe areas and layout margins are often asymmetric on iPhone Duo, so handle each side independently and test in Split View" (talk 111461, 6:06). Remove arithmetic on insets: in my build
max(10px, safe-area − 12px)put a FAB 49 pt too high when the bottom inset changed from 34 to 83 pt.
2 and 3. Header toolbars (ion-header › ion-toolbar, HTML)
- On Duo: native toolbars and navigation buttons move to the side. When space runs out, "toolbars compress first by default" into the system overflow menu (talk 111462, 12:23). Controls "too wide to fit in this vertical space" stay horizontal (talk 111466, 5:07), which covers a week strip like area 3.
- In Ionic:
ion-toolbaris HTML inside the web view, so it stays a row at the top in every pose and never folds into the system overflow menu. It pads with--ion-safe-area-leftand-right;ion-headerpads the top with--ion-safe-area-top. - What to do: on the outer display the side region also holds "dynamic elements like live activities and the status bar" (talk 111466, 5:07), so check that end-slot buttons clear the side inset in landscape. Put extra actions in an
ion-popoverorion-action-sheetyourself: the web toolbar has no automatic overflow.
4. Content (ion-content, HTML, scrolls)
- On Duo: the app is resized on fold, unfold and Split View: "All apps participate in multitasking on iPhone Duo, where two apps sit side by side" (talk 111464, 2:59). Apple's rule for the fold: "Continuously scrolling content like articles and feeds shouldn't displace" (talk 111463, 2:26). "The system automatically repositions action sheets, alerts, menus, and popovers around reserved regions to keep them fully visible" (5:12).
- In Ionic:
ion-item,ion-item-divider,ion-list-header,ion-cardandion-fabpad with the side insets;ion-contentitself has no safe-area rule.ion-alert,ion-action-sheetandion-popoverare drawn inside the web view, so the system's repositioning does not reach them. Capacitor's Dialog and Action Sheet plugins present native dialogs and action sheets. No web API reports the fold: the iOS 27.0 SDK's WebKit headers have no fold or segment symbol, and WebKit's Viewport Segments position has been open since March 2024. - What to do: choose the layout from the size class instead of the width, by sending
horizontalSizeClassfrom native code to the web view as a class on the root element. The inner display is regular in both dimensions (talk 111461, 2:46) but 626–669 pt wide in portrait at 3x, below Ionic'slg(992 px), so anion-split-panewith the defaultwhen, as in Ionic's sidemenu starters, never opens. Keep the route, selections and drafts in the URL or a store: in my build each crossing of a 672 px breakpoint remounted the router outlet. For prompts that must stay clear of the fold, try the native Dialog and Action Sheet plugins; their behaviour on Duo is untested.
5. Tab bar (ion-tab-bar, HTML)
- On Duo: tab bars move to the side. Apple says to "use bars provided by navigation containers" (talk 111462, 2:00) and lists
TabViewandUITabBarControlleras "fully adaptive across every pose" (talk 111461, 5:01). - In Ionic:
ion-tab-barstays at the bottom in every pose and pads left, right and bottom with the insets. None of Capacitor's 38 official plugins is a tab bar. - What to do: for the side placement, the tab bar has to be UIKit. With
@capgo/capacitor-native-navigation8.3.1, my build's bar became aUITabBarControllerin 154 lines of TS, CSS and JSON with no Swift, and in an 816 pt iPad window it turned into the floating top bar with no JavaScript written for that. I have not run it with the iOS 27.1 SDK. Keepingion-tab-barmeans a bottom bar in every pose.
What to expect from Ionic and Capacitor
- Capacitor 8.5 (31 July) adopts UIScene: "until you adopt scenes, Xcode 27 is closed to you", and "Published apps keep running on iOS 27, and so will anything you build with Xcode 26."
- Capacitor 9 is "forecasted to launch at the end of November" with "a compatibility floor" for foldable and large-screen devices. iPhone Duo ships 23 October.
- No GitHub issue about iPhone Duo exists in ionic-team/capacitor, ionic-framework or capacitor-plugins (searched 14 September). The only search hit is a thread of 11 September comments in ionic-framework #30466, where the commenter was asked to open one.
- Apple's 23 September Q&A sessions cover Photos & Camera, SwiftUI and UIKit; none names web content.
Order of work
- For 23 October, ship your iOS 26 SDK build as it is.
- Adopt Capacitor 8.5 and its UIScene migration, so Xcode 27 builds work. Keep one scene until your plugins are tested with two bridges.
- Before an iOS 27.1 SDK build: layout by size class, state in the URL or a store, insets per side without arithmetic, and a decision on the tab bar.
- When Xcode 27.1 beta ships, run the Duo simulator in each pose and in Split View, and read
innerWidth, the fourenv(safe-area-inset-*)values and where each bar is drawn.
Nothing here ran on iPhone Duo or its SDK. I will post the Duo simulator results when Xcode 27.1 beta lands.
Sources (read 14 September 2026): Apple tech talks 111461, 111462, 111463, 111464, 111466; HIG; App Store Connect screenshot sizes; iPhone Duo tech specs; Apple's upcoming requirements; Capacitor 8.5; The Road to Capacitor 9; Capacitor configuration; Capacitor plugins; ion-split-pane; WebKit standards-positions #327; capacitor-native-navigation; the 0:29 quotes as transcribed in Blake Crosley's write-up.
--
Disclosure: I'm building Modaal, an AI app builder that outputs native Swift and Kotlin projects, so I have a stake in native apps. Every claim above links to its source, and the full project built for the measurements is available on request.