Creating compelling cross-device foldable experiences on the Web

Is your responsive design ready for foldable devices? Learn how the new Device Posture API allows your website to react to a device's physical state, not just its size.

#1about 3 minutes

Understanding user needs for foldable devices

Foldable devices create new user interaction patterns that traditional responsive design alone cannot fully address.

#2about 2 minutes

Introducing the W3C Device Posture API

The Device Posture API provides a standard way to model a device's state as either 'continuous' for flat screens or 'folded' for bent screens.

#3about 2 minutes

Using JavaScript and CSS for device posture

Detect a device's fold state using the `navigator.devicePosture.type` property in JavaScript or the `device-posture` media query in CSS.

#4about 2 minutes

Managing screen areas with the Viewport Segments API

The Viewport Segments API complements the Device Posture API by providing CSS properties to query the dimensions of logical screen segments.

#5about 4 minutes

Understanding the W3C web standards process

Web standards evolve through stages like Working Draft and Candidate Recommendation, with community review at each step.

#6about 3 minutes

Balancing privacy and accessibility in new standards

New web APIs undergo rigorous review to minimize privacy risks like fingerprinting while maximizing accessibility opportunities.

#7about 3 minutes

Live demo and current browser support

A practical demonstration shows how a web app's UI adapts to a device folding, with the API available in Samsung Internet and behind a flag in Chrome.

#8about 1 minute