What does the iPhone Duo mean for web development?
A breakdown of the Device Posture API and Viewport Segments API showing how Video.js adapts its player for the foldable iPhone Duo screen.
Foldable screens are becoming standard, and the web platform is adapting. The Video.js team explored the iPhone Duo emulator and two new APIs for managing layouts on foldable devices:
- Device Posture API — reports the physical posture of the device via the
(device-posture: folded)media query. The browser knows whether the phone is folded like a book or opened flat. - Viewport Segments API — splits the screen into physical regions. Using
env(viewport-segment-width)or@media (horizontal-viewport-segments: 2), you can easily build hinge-aware layouts: for example, placing the video on the top screen while moving playback controls and chat to the bottom one.
Video.js has already adapted its player: when the device is folded, the video automatically centers itself on the top half, turning the bottom screen into a touch remote.