> Markdown version of [/videos/1173-creating-compelling-cross-device-foldable-experiences-on-the-web?t=1143](https://www.wearedevelopers.com/videos/1173-creating-compelling-cross-device-foldable-experiences-on-the-web?t=1143). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Creating compelling cross-device foldable experiences on the Web

Are foldables breaking your web layouts? Discover how the new Device Posture and Viewport Segments APIs let you build hardware-aware web experiences without overhauling your existing code.

- **Speakers:** [Matthew Atkinson](https://www.wearedevelopers.com/@matthew-atkinson)
- **Event:** 
- **Published:** August 22, 2024
- **Duration:** 25:38
- **URL:** https://www.wearedevelopers.com/videos/1173-creating-compelling-cross-device-foldable-experiences-on-the-web

## Summary

As new hardware formats like foldable and dual-screen devices gain momentum, web developers face the challenge of bridging the gap between native capabilities and the open web. While standard responsive design seamlessly handles viewport resizing, it fundamentally lacks the hardware awareness needed to determine if a physical screen is folded or how to predictably arrange content across segmented displays. To address this, the W3C is actively standardizing solutions that empower web applications to build natively responsive, cross-device foldable experiences.

The proposed architectural framework centers around two emerging browser specifications: the Device Posture API and the Viewport Segments API. The Device Posture API enables developers to query the physical state of a screen—detecting whether it is `continuous` or `folded`—using both JavaScript hardware detection and CSS media queries. Complementing this macro-level detection, the Viewport Segments API exposes CSS environment variables to calculate the precise dimensions of logical screen boundaries, allowing UI elements like video players or map interfaces to cleanly adapt around physical hinges. Because these APIs embrace progressive enhancement, legacy web experiences simply render identically to standard responsive outputs across single viewports, naturally preventing layout regressions without demanding code overhauls.

Building these browser primitives highlights the rigorous W3C specification lifecycle, which scrutinizes new tools for accessibility, internationalization, and user security. A notable technical safeguard within the Device Posture API was the intentional omission of precise hinge angles to mitigate browser fingerprinting and strictly preserve hardware privacy. With these capabilities currently available in Samsung Internet and shipping behind experimental flags in Chrome, the platform is now highly reliant on community validation. Engineers are encouraged to test layouts via browser simulation modes and submit architectural feedback via GitHub, providing individual developers a rare opportunity to directly "shape the future of a web platform."

**Keywords:** device posture API, viewport segments API, foldable web design, W3C standardizations, CSS media queries, browser fingerprinting prevention, hardware detection constraints, dual-screen interface layouts, progressive enhancement, UI dimensional scaling, chromium experimental flags, cross-device accessibility, web platform architecture, logical screen boundaries

## Chapters

1. **Adapting web applications for new foldable device interactions** (00:02) — Evolving responsive design handles unique hardware capabilities and dynamic screen configurations.
1. **Detecting physical hardware states with the device posture API** (04:07) — Global variables and CSS media queries allow web content to react dynamically when a physical device transforms.
1. **Modeling divided screens using the viewport segments API** (08:04) — Targeted CSS properties track dimensions of logical screen subdivisions for optimized multi-area web layouts.
1. **Navigating the W3C standards publication and review process** (09:44) — Technical specifications undergo rigorous progression from working drafts to official recommendations through structural and architectural review.
1. **Minimizing privacy risks and enabling accessible foldable layouts** (13:51) — Limiting specific hardware properties like fold angle prevents browser fingerprinting while maintaining strong accessibility patterns for users.
1. **Demonstrating reactive CSS capabilities on foldable mobile hardware** (16:36) — Real-world mobile browser previews display native layouts reacting instantly as screens transition between flat and folded boundaries.
1. **Shaping web platform capabilities through active community involvement** (19:03) — Filing technical issues and participating in working groups directly impacts the forward progression of experimental browser features.
1. **Testing simulated foldable layouts and anticipating multi-fold hardware** (20:25) — Software simulation tools facilitate responsive layout verification while emerging specifications prepare for advanced hardware form factors.

## Related Moments

- [Identifying and exploring upcoming web API concepts](https://www.wearedevelopers.com/videos/316-explore-new-web-features-before-everyone-else) (from "Explore new web features before everyone else")
- [Expanding browser capabilities with modern web APIs](https://www.wearedevelopers.com/videos/289-pwas-in-2021) (from "PWAs in 2021")
- [Understanding Interop 2025 and new CSS capabilities](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw")
- [Strategies for keeping up with advanced CSS evolution](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Addressing browser support for legacy capabilities and modern frameworks](https://www.wearedevelopers.com/videos/647-defeat-that-legacy-monster-guerilla-refactoring-with-web-standards) (from "Defeat that legacy monster! Guerilla refactoring with web standards")
- [Relinquishing pixel-perfect control to embrace the resilient web](https://www.wearedevelopers.com/videos/1265-keith-cirkle-of-github-on-react-fatigue) (from "Keith Cirkle of GitHub on React Fatigue")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 128 - Do not Google Monopoly](https://www.wearedevelopers.com/magazine/465-dev-digest-128-do-not-google-monopoly)
- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [iOS Engineer, Swift/SwiftUI/Combine (B2C Broker)](https://www.wearedevelopers.com/jobs/ext/1611832-ios-engineer-swift-swiftui-combine-b2c-broker) at **Bitpanda**