What the iPhone Duo means for web development

We've been working really hard to get the new version of Video.js out the door, and we recently released v10.0.0 ! So over the weekend, I decided to relax a bit with a side project: digging into the web APIs that we’ll have access to on the iPhone Duo. I know, I know, this kind of folding stuff has been kicking around on Android for years. But I’ve been an iOS user since my beloved HTC One died over ten years ago. And now, Tim John Apple has finally decreed it to be my turn to fold a phone. And I’m excited for my turn. Not only for the joy of once again having a small phone (iPhone mini, i miss u 🥺). But also for what this means for developers. Apple released six videos on building great apps for the iPhone Duo. The videos cover APIs that tell you about the device’s physical characteristics and state, and they’re brimming with design inspiration for the types of apps and interactions developers can build now. But this is Apple. Did they leave any scraps for us web developers? What web APIs are available for the iPhone Duo? After downloading Xcode 27.1 beta , I immediately fired up the simulator Device Hub, booted an iPhone Duo, beelined for the settings, and dug into the feature flags . I love feature flags. This list is an absolute toy box of the future of the web; the cool features that maybe, someday we’ll get to play with. I pause and look up a few as I pass by. Like, what the heck is CSS Rhythmic Sizing ?? But no. I’ve got to focus. I’m here for two specific things. And after a bit of scrolling, I find them. The Device Posture API and the Viewport Segment API. The Device Posture API The Device Posture API basically tells you whether the display you’re looking at is continuous (e.g., your normie screen, flat or curved, so 2018) or folded (e.g., a folding phone partially folded, like a laptop). This works in JavaScript — navigator.devicePosture — or in CSS — @media (device-posture: folded) . The Viewport Segments API The Viewport Segments API tells you about the individual regions of your display. In JavaScript, window.viewport.segments gives you an array of DOMRect s telling you about the size, shape, and location of the segments. In CSS, you can learn about segments in two ways. First, @media (horizontal-viewport-segments: n) and @media (vertical-viewport-segments: n) let you respond to the number of (you guessed it) horizontal and vertical viewport segments. Second, you can access the position and size of any segment with CSS environment variables …