Building web experiences for this form factor is a completely different game altogether, but Microsoft Edge team has proposed a new concept that uses existing and as well as new APIs to help web developers who want to target foldable devices.
Microsoft has confirmed that their internal product teams are exploring experiences for emerging classes of new devices, including foldable phones such as Samsung Galaxy Fold.
According to Microsoft’s own internal product teams, some of the current problems associated with foldable experiences are:
• Hardware differences: Optimized webpages may run perfectly on a device like Samsung Galaxy Fold, but it could experience technical difficulties on another similar hardware from a different company.
• Folding capabilities and state: Problems when determining the region (fold or unfold) that could be safe to render contents.
• Software issue: Parts of the webpage could be occluded by software keyboard and other software-related areas including notifications.
• Future: Developers expect a stable way to target this class of devices so that they don’t have to update their pages for every new iteration of similar hardware.
How Microsoft wants to shape the web for foldable experiencesMicrosoft recommends a new concept called ‘Window Segments Enumeration API’ that would represent regions and even dimensions of the window that reside on adjacent displays.
“Window Segment dimensions are expressed in CSS pixels and will be exposed via a JavaScript API that allows developers to enumerate segments, including about regions that are occluded,” the firm noted.
It would allow web apps to take advantage of multiple displays. For example, here’s a navigation app that will render a map on one window and search results on another. This app is using ‘devicePixelRatio’ to compute the layout regions of a window spanned across displays.
Similarly, this concept will work when a software keyboard shows up in a region that would be occluded:
Finally, we have an example of a mail app that would render a list of emails on a side of the display with a software keyboard and selected mails on another part:
According to the Redmond firm, the existing APIs can be also utilized to improve the experience on a foldable device:
• Presentation API
• Screen Enumeration API Explainer that would provide information about the physical screen configuration.
• Window Placement API Explainer
source
