How to Support Dual-Screen Devices as a Web Developer

As dual-screen and foldable devices grow in popularity, we’ve seen a number of apps updated to support the upcoming form factor. Over the past two years, apps from Microsoft, Samsung, Google and others have gained the ability to detect the position of screens and the angle of their hinges to adapt the user interface and provide a better experience. However, not much optimization has really been done in the realm of apps and sites that live in the browser. The developers didn’t really have the tools to make meaningful improvements to the experience until now.

Since version 97 of Microsoft Edge, these tools are now available. This dual-screen support has been in preview for just over a year and boils down to a combination of media queries and environmental variables compatible with dual-screen, as explained by Craig Dunn, Senior SW Engineer, Surface Duo Developer Experience at Microsoft. Craig goes on to show us how, using these two features, we can start creating an optimized and aware experience of dual-screen devices like the Surface Duo.

A great practical application of this new feature is to create web apps that behave much like the dual-screen experience in some native apps. Let’s take a look at the example below. Suppose you are building a navigation or map application and you want to optimize the experience for dual-screen devices when opened. This is now entirely possible using a combination of dual-screen-enabled media queries and dual-screen-enabled environmental variables.

The same level of optimization can be achieved for single-screen scenarios, if the user decides to fully open their Surface Duo and use a single screen, the app can detect this behavior and revert to a more responsive view to this use case. as shown below.

surface-duo-single-screen-map-location

While it was definitely a rocky start for early adopters, it looks like the developer community is continuing to make improvements that target these new form factors.

To learn more about how to create your own optimized dual-screen web experiences, head over to Microsoft’s official documentation on the subject. Let us know what you think of these improvements in the comments below, are you looking forward to more websites and web apps adopting these features?

Share this post: