Microsoft wants to shape web for foldable display devices

Samsung Galaxy Fold
Image Courtesy: Samsung

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
  • 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
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.

Map on foldable device

Similarly, this concept will work when a software keyboard
shows up in a region that would be occluded:

Webpage on foldable device

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:

Mail on foldable device

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

i am as a writer and blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *