Foldable Phones Are Here to Stay: What Web Developers Need to Know About the New Device APIs

Let's be honest—foldable phones have been lurking around the tech periphery for a few years now. Android users have been living the foldable life while the rest of us watched from the sidelines, occasionally drooling over those sleek device demos. But Apple finally made the jump, and whether you're team iPhone or not, this shift has massive implications for the web development community.

As someone who's been watching this space closely (and may have spent an embarrassing amount of time playing with the iPhone Duo simulator over the weekend), I can tell you: the web APIs supporting these devices are surprisingly robust. Apple dropped six videos covering how to build apps for the Duo, and while much of that is native iOS territory, they've left the door wide open for web developers with some genuinely cool APIs.

So let's dig into what you can actually use today.

The Device Posture API: Know Thy Fold

First up is the Device Posture API. This nifty little interface tells you whether your user is looking at a flat screen, a folded display, or something in between. Think of it as your device giving you a status update on its physical state.

In JavaScript, you can access it through navigator.devicePosture, which will tell you if the screen is continuous (normal flat display) or folded (partially closed like a laptop). In CSS, it's even cleaner with the device-posture media query:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

This is huge for media players, document viewers, or any app that could benefit from a two-screen setup. Imagine your video player automatically moving controls to the bottom screen when the device is folded—yes, that's happening.

The Viewport Segments API: Divide and Conquer

If the Device Posture API tells you the state of the device, the Viewport Segments API tells you about its anatomy. When a foldable phone is partially closed, it creates distinct screen regions, and this API lets you query those segments programmatically.

In JavaScript, window.visualViewport.segments returns an array of DOMRects describing each segment's size, shape, and position. In CSS, you get even more flexibility:

/* Target layouts based on number of segments */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

The CSS environment variables are particularly elegant. env(viewport-segment-width 1 0) gives you the width of the segment at horizontal index 1, vertical index 0. It takes a moment to wrap your head around the coordinate system, but once it clicks, the possibilities are endless.

Why This Matters for Your Projects

Here's the thing—foldable phones aren't a niche product anymore. They're becoming mainstream, and the web APIs are already here to support them. At NameOcean, we talk a lot about building for the future, and this is a perfect example of why that matters.

For startups and developers, this opens up entirely new interaction patterns. A travel app could show a map on one screen and booking details on the other. An e-commerce site could display product images on one segment and reviews on another. A code editor could finally give mobile developers a real split-view experience without any native app required.

The crease isn't a limitation—it's an opportunity. And with these APIs, you can build experiences that feel native to foldable hardware while still being accessible to everyone on the regular web.

Getting Started

The best part? You don't need to rush out and buy a foldable phone to start experimenting. The Safari Technology Preview and Chrome DevTools both have simulator support for testing these APIs. Spin up a virtual device, toggle between flat and folded states, and watch your layouts adapt in real-time.

If you're running a business website or web app, now's the time to audit your responsive design strategy. The question isn't whether foldable phones will matter—it's whether you'll be ready when your users start showing up with them.

The web platform continues to evolve in fascinating ways, and APIs like these prove that it can move fast when hardware inspires new interactions. Your turn to fold.