As dual screen and foldable devices gain popularity we’ve seen a number of apps updated to support the up and coming form factor. Steadily over the last two years apps from Microsoft, Samsung, Google and others have gained the capability of detecting the position of the screens and angle of their hinges to adapt the user interface and provide a better experience. However not much optimization had really been done in the realm of apps and sites which live in the browser. Developers did not really have the tools necessary to make any meaningful improvements to the experience until now.
As of version 97 of Microsoft Edge these tools are now available. This dual screen support had been in preview for a bit over a year and it boils down to a combination of dual-screen-aware media queries and environmental variables as explained by Craig Dunn, Principal SW Engineer, Surface Duo Developer Experience at Microsoft. Craig goes on to show us how using these two features, we can begin to create experience optimized for and aware 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 dual-screen experience do in some native apps. Let’s have a look at the example below. Say you are building a navigation or map application and you’d like to optimize the experience for dual screen devices while opened. This is now very possible using a combination of the dual screen aware media queries and the dual screen aware environmental variables.
The same level of optimization can be achieved for single screen scenarios, if the user decides to flip their Surface Duo all the way open and use a single screen, the application can detect this behavior and go back to a view more suitable for that use case as shown below.
While it was definitely a rocky start for early adopters, it seems that the developer community continues to make improvements which target these new form factors.
To read more about how to build your very own dual-screen optimized web experiences, head over to Microsoft’s official documentation on the subject. Let us know what you think about these improvements in the comments below, are you looking forward to more websites and web apps adopting these features?