Design and Development Consideration for Dual Screen Devices
summary
New web primitives detect and size screens so layouts actually avoid the hinge and span displays rather than just claiming support The CSS viewport-segments media feature plus six environment vars like viewport-segment-left give exact x y width height per display The JavaScript visualViewport.segments returns null for single view or two DOMRects when spanning and is an immutable snapshot so code re-queries on resize Origin trials land in Edge on Android 97 emulation works in DevTools and the mail app demo hides content behind the fold successfully
AI-written summary · about
chapters (8)
- 0:00Dual screen web development intro
- 4:43Dual screens in responsive design
- 7:34CSS viewport segments media feature
- 10:45CSS environment variables for dual layout
- 14:39JavaScript viewport segments API
- 17:28Dual screen app design examples
- 21:49Testing dual screen solutions
- 23:53Resources and community engagement
related talks
33mDesign & Development Considerations for Dual Screen Devices
47mDual-Screen and Multi-Modal: Rethinking modern mobile apps
52mThe Mobile Viewports
56mClosing Panel: "HTML5 and Devices"
20mXDBrowser: User-Defined Cross-Device Web Page Designs
01h 21mEnhance your single screen designed-app to make it shine on foldable devices
43mResponsive Design, Past, Present and Future
21mDesigning for displays that don't exist yet