The iPhone Duo is real now. 7.6" inner display, 5.4" outer, preorders already open. And somewhere out there a product manager is about to ask a frontend team “so what happens to our site when someone folds this thing,”
I spent a few minutes building foldify, a small React library for exactly this problem. Two hooks, two components, nothing clever…
useViewportSegments() reads the actual screen geometry — on a folded/dual-screen device it gives you back the real DOMRect for each segment, gap and all. useDevicePosture() tells you whether the device is lying flat or bent like a mini laptop. Wrap your content in and it splits your children across the segments automatically, with the gap sized to the actual physical hinge instead of some guessed constant. just pads things so a button doesn’t end up literally inside the seam.
Here’s the part that actually matters: none of this is a finished standard. Both APIs are still W3C drafts, Chromium only supports them partially behind flags, and WebKit (Safari’s engine, presumably the iPhone Duo’s too) hasn’t even taken a public position yet. So the actual foldable iPhone in front of you might not expose any of this. Apple could add it later, do its own thing, or ignore it entirely.
That’s why every function has a fallback built in from day one, not added on top. No segments API? You get one segment. No posture API? You get 'continuous'. Nothing throws, nothing needs a feature-detect check in your code. A regular phone and a folded one hit the same code path, they just get different numbers back.
It’s on npm as @summonair/foldify if you want to poke at it before your own PM asks the question.
Link: https://www.npmjs.com/package/@summonair/foldify
Top comments (0)