Design & Development Considerations for Dual Screen Devices
summary
New web primitives let layouts detect and target dual‑screen geometry so content avoids the hinge and each pane gets explicit sizing. Microsoft prototypes become shipping features: a CSS media feature (viewport‑segments), six CSS environment vars (e.g. viewport‑segment‑width), and a JS property (visualViewport.segments) on the Visual Viewport API. Origin trials refined ergonomics; demos (including a recipe demo at aka.ms) and the DevTools emulator (DevTools emulator) work and match a Surface Duo. Market: 7.1M foldables shipped in 2021, projected 27.6M by 2025.
AI-written summary · about
chapters (4)
- 0:00Start
- 0:06Design and Development Considerations for Dual-screen Devices
- 4:02Designing for Foldable Devices
- 18:37When to use the JavaScript API
related talks
24mDesign and Development Consideration for Dual Screen Devices
47mDual-Screen and Multi-Modal: Rethinking modern mobile apps
01h 21mEnhance your single screen designed-app to make it shine on foldable devices
21mDesigning for displays that don't exist yet
52mThe Mobile Viewports
20mXDBrowser: User-Defined Cross-Device Web Page Designs
01h 01mThe Evolution of Responsive Web Design: What's Next?
56mClosing Panel: "HTML5 and Devices"