The iPhone Duo came out a few days and and I have been having a blast using mine. And so I have been updating my apps which run on Hotwire Native – A platform that let's me put my rails site in an app, with progressive enhancement via little bridges so that parts of my app can have native components. Most of the time you're in a webview, and your rails site only knows what it's told over a bridge, or an API request.

I wanted to make my app increase the gap between columns when the Duo is in book mode (partially folded). There doesn't appear to be a way to get this from the webview itself, so I decided to (get claude to) write my own bridge component.

Introducing Apple Hardware Bridge Component.

Once enabled I can use the following code to respond to the hinge, or if I am on the cover, or the big screen.

<body data-controller="bridge--device" class="group/device safe-padding">
  <main class="grid duo-inner:grid-cols-2 duo-spread">
    <section class="duo-right-page">On the cover, and on the right when open</section>
    <section class="duo-outer:hidden">Only on the big screen</section>
    <p class="hidden duo-book:block">Half open, like a book</p>
  </main>
</body>

Instead of stopping there, I decided it was finally time to fix the issue with safe areas in the webview, these are now sent over the bridge too so you can position your content appropriately.

<body data-controller="bridge--device" class="safe-padding">

.toolbar {
  padding-top: var(--device-occlusion-top);
  padding-right: var(--device-safe-right);
}

And finally, I made it detect all kinds of Apple Hardware! I have tested it on the iPhone Duo, the iPhone Air and the iPad Pro 11-inch (M4). There is a demo app you can build, I would love it if people would test on their devices and let me know how it works.

The sky is the limit now, you could make your webview content change in all kinds of ways based on the angle of the hinge, or the rotation of the device. I am excited to see what people come up with!

Hope you enjoy! Let me know if you build something cool!