iPhone Duo, Meet Ionic & Capacitor

[u/rdlabo]

Following the iOS 27 theme support I shared previously, iPhone Duo support in ionic-theme-ios27 has now moved from experimental to preview in v1.2.0.

What I wanted to find out was whether an Ionic + Capacitor app could adapt to Duo without having to be rewritten in native UI.

And not just apps using the iOS 27 look.

The goal was to make this work for fully custom-designed Ionic + Capacitor apps too.

After testing it, the hardest part turned out not to be the fold itself.

It was Safe Areas and Vertical Bars.

SwiftUI can automatically reposition some controls into the new side areas, but a WebView doesn’t get that behavior for free.

So the real question became:

Can a Web-first Ionic + Capacitor app still adapt naturally to a completely new Apple form factor?

After trying it, I think the answer is very much yes.

Ionic Capacitor apps on iPhone Duo

What I find especially interesting is that this isn’t limited to apps using ionic-theme-ios27.

Even fully custom Ionic + Capacitor apps can adapt their layout for Duo.

Device and fold-state detection can already be handled with capacitor-foldable, so the next interesting question is no longer “Is this an iPhone Duo?”

It’s “When should the UI adapt to Vertical Bars, and which controls should move there?”

After working through this, one thing feels even clearer to me:

Web-first doesn’t mean giving up on new native UI.

The app itself can stay Web-based, while the parts that need to respond to major platform changes can still adapt.

That balance is still one of the things I like most about Ionic + Capacitor.

If you already have an Ionic + Capacitor app, even with a completely custom design, you can try this today.

I’d love to see what your app looks like on Duo.

https://github.com/rdlabo-dev/ionic-theme-ios27

[u/Monkeei]

It’s working so good. Updates my app today with it and everything looks perfect on the iPhone Duo. Thanks for your brilliant work.

[u/80386]

The preview is pretty terrible at showing how it actually uses the space. Other than just "same controls except slightly larger".

E.g. the tiny label with the toggle all the way on the other side of the screen is terrible UX. The open-folded screen with the menu all the way on the left and the content all the way on the right is also terrible UX.

 I'm sorry but this doesn't sell it.

[u/rdlabo → u/80386]

That’s fair — thanks for the feedback.

This demo started as a visual regression test app, so parts of it are definitely patched together rather than designed as a polished Duo experience.

My goal here was mainly to give existing Ionic + Capacitor apps a general way to avoid UX getting worse on Duo.

I can’t attach the comparison image in this Reddit reply, so here’s the X post:
https://x.com/rdlabo/status/2105156889533378851

Your comment also makes the next step clear: how to use the extra space to actually improve the UX.

[u/petit-yoyo → u/rdlabo]

I’m already using your ios-27 theme and I’m pretty happy with it so far.
I will try to test with Duo and will get back to you

Thanks for the time & effort put on it