Building Web Layouts For Dual-Screen And Foldable Devices
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:
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:
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 to target single-screen devices.
Heads up! We try following best practices here at Magebit, so lets rewrite this code with destructuring
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 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!
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.
Magebit is a full service eCommerce agency specialized in Magento. At Magebit we create the wonders of eCommerce and support small sites as well as large enterprises.
Subscribe to our blog
Get fresh content about eCommerce delivered automatically each time we publish.