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
- Folding capabilities and state: Problems when determining
the region (fold or unfold) that could be safe to render
- Software issue: Parts of the webpage could be occluded by
software keyboard and other software-related areas including
- 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 experiences
Microsoft 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
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 mails 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