Dual screen and foldables in CSS

Microsoft has released an extension for CSS and Javascript for its new dual-screen Surface Duo device. Whereby, released is a slight exaggeration: The new features are still hiding in the experimental area of the Edge browser.

CSS

With the new media feature screen-spanning, a special styling can be applied to devices with a split display. Currently, it can be used to distinguish between vertically or horizontally split displays.

Detecting affected devices is a first step. To be able to consider the position and especially the width of the area between the display parts in its stylesheet there are additionally new variables with which it is possible to organize the distribution of the own content on the parts of the display.

@media all and (screen-spanning: single-fold-vertical) {
.div {
}
}

Javascript

Parallel to CSS, Microsoft also gives you the possibility to access the division of displays using Javascript. The Window Segments Enumeration API is a more flexible approach that should work well for different arrangements of any number of displays. The only conceptual limitation is that the displays have to be rectangular. This is because the description of a part of the display area is done by a point (top left) and a width and height. This information can be taken from the entries of an array which can be obtained with window.getWindowSegments().

Conclusion

The styling possibilities using CSS are still limited to the simplest case, but nevertheless a pragmatic approach for the emerging device class with split or foldable displays. In the area of Javascript this restriction does not exist.

It would be great if the implementation would support not only mobile devices like the Surface Duo. There are also multi-monitor configurations on desktops that could be reflected in the Window Segments Enumeration API as soon as a browser window spans multiple monitors.