Foldable Displays With Surface Duo and React

This content originally appeared on Posts on LINQ to Fail and was authored by Posts on LINQ to Fail

Last month Microsoft released the long awaited Surface Duo, a foldable, dual-screen mobile device. While it’s not (yet?) available in Australia, it didn’t stop me being interested in it, in particular because of what they are doing for web developers. You can read the full blog post here but the key points are: CSS primitives to detect the layout spanning mode CSS variables for screen and hinge dimensions A JavaScript API for getting window segments Basically, the browser sees both displays as a single viewport and it’s up to you to manage how that viewport is utilised, and in particular, how you manage the gap between them (which the browser doesn’t know about).

This content originally appeared on Posts on LINQ to Fail and was authored by Posts on LINQ to Fail