Quick summary

Dual-screen devices that have been on the market for a few years enabled new web layout support technologies that adapt to these devices. In addition, these capabilities integrate with existing concepts, such as the viewport or media queries, so web developers and designers could concentrate on leveraging two displays to create attractive UX rather than mastering a new set of code to build their support.

Detecting Foldable Devices with CSS

Foldable device support is the new advanced responsive design level. Today, we make a lot of use of build-in media utilities and queries to target different types of devices. In addition, we now have the CSS Viewport Segments media feature to target our foldable and dual-screen devices.

This media query can take two values. The first value is horizontal-viewport-segments, representing the device state when the device hinge is vertical and the viewports are split by the hardware hinge or folded into columns.

We utilize this media query to serve styles for a foldable device:

The numeric value here represents the accurate number of device orientation viewports. So, for example, we have two different viewports when the device is in the vertical fold (like a book), while in the horizontal direction, there is just one. It is also possible to combine our media queries to target dual screen devices and certain viewport widths to serve up specific styles:

The vertical-viewport-segments viewport segments media feature manages the state of the device when the hinge is horizontal, and the hardware hinge splits viewports into rows.

We would use the following code to target such devices:

Detecting Foldable Devices with JavaScript

There might also be cases where a developer might not be able or want to utilise CSS media queries to detect whether the foldable device and this is where the moment the JavaScript API comes in handy.

Viewport segments represent the regions of the window that reside on different displays adjacent to each other. For example, to detect a dual-screen device, a developer would query the segments property with the following code:

This will return the DOMRects array value, indicating the number of viewports. The query will return null if only one viewport segment exists. This behaviour was initially set this way to prevent future compatibility issues so that developers don’t start using visualViewport.segments[0] to target single-screen devices.

Heads up! We try following best practices here at Magebit, so lets rewrite this code with destructuring visualViewport.segments[0]:

The query will return 2 DOMRects on foldable devices, representing the 2 available viewports when the browser window spans across the fold.

This is an immutable snapshot value of the device state at the moment of querying the attribute. The viewport segments previously retrieved are no longer valid and need to be queried again through a resize or orientation event if the browser window resizes or rotates (or both).

If you resize the browser window to span only one display region, it will fire the resize event. If you rotate the device, this will fire both the resize and orientation event, and you can use the events to query the attribute again to get the current state of the browser display regions.

How cool is that? In fact, by the time of 2022, both the CSS media features and JavaScript segment property will detect a dual-screen device. I would say the JavaScript property is best used when there is no direct CSS access. Do you think there might be no such options? Well, you are wrong, as this can happen when you work with objects in Canvas2D and WebGL engine. An example would be a Treasure hunt game that you develop that could leverage both screens.

How to calculate the hinge width?

You never know when this might become useful, so I will just leave it here. When you have a device that has a hinge covered by hardware features, you will be able to calculate it using the environment variables. Yes, it is that simple!

If we have a device in the vertical orientation and we really want to find the hinge width so that no content is obscured, all we have to do is subtract the left viewport segment of the right display from the right viewport segment of the left display or vice-versa.

We can now utilise the CSS environment variables to place our wonderful content within the display boundaries. This is especially helpful if you want to place content directly against the hinge or fold.

So let's place some images together because, well, we can. Imagine you need to display the image directly against the hinge in the first display region on the left. This area is the right segment of the viewport, so we will use viewport-segment-right to place it with the following code:

Yes, another simple task is done, and we are happy! Hold on a second... Looks like the image is still on the right side, isn't it? The image is initially positioned on the left property, the left edge of the image ends up aligned to the viewport-segment-right display area. What we have to do here is subtract the image width from our environment variable to get the image aligned to the correct hinge edge:

Yes. This is the answer!

Summary

Dual-screen devices are just the next important step in responsive design. If you have a PWA or website, the available APIs are there to significantly reduce the entrance threshold. It is now an exciting time for playing around with the layout on the web (because we all love layouts), and dual screens provide an opportunity to get more and more creative.