Original text: blogs.windows.com/msedgedev author: Microsoft Edge Team

Wechat search [front-end full stack developer] pay attention to this hair loss, stall, selling goods, continuous learning programmer, the first time to read the latest article, will give priority to two days to publish new articles. Attention can be a gift package, you can save a lot of money!

The browser is one of the most widely used applications on any device, and now it runs on a whole new category of hardware: dual-screen and foldable devices.

With a variety of new dual-screen and foldable devices coming to market, including the Microsoft Surface Duo, there’s never been a better time to think about how your website will adopt these shapes.

Today, we’re excited to announce two new experimental features that will help Web developers effectively lay out content in browser Windows that span multiple display areas and create responsive websites that naturally fit into this new class of devices.

  • The CSS screen-spanning media feature and a set of environment variables describe the folded geometry.
  • JavaScript Window segments Enumeration API, useful for working with non-DOM targets such as Canvas2d and WebGL.

Collapsible device class

Broadly speaking, foldable devices come in two variants: dual-screen devices and single-screen devices that utilize flexible display technology. Both have a lot in common: They’re portable, multi-pose devices that allow users to rotate, flip and fold.

At this size, applications can be located on one side or across two display areas. Websites that respond to this cross-state are integrated with semantics and intentions that logically divide the content presented.

The vast screen space and unique posture enabled by such devices allow Web developers to unlock unprecedented Web experiences in a device that can fit in a pocket or wallet.

Transition from traditional continuous screens to dual and foldable screens

While existing sites will continue to use the out-of-the-box approach, making sites aware of device foldability can greatly improve the user experience.

To better illustrate this opportunity and show how the newly created browser features work, we’ll take you through an example of an enhanced email client layout.

Displaying a list view of your inbox and the contents of your email side by side is a common pattern that fits naturally into a larger viewing area. When a browser window spans two display areas on a dual-screen device, the total viewport width is likely to be comparable to that on a traditional horizontal tablet device.

Without modification, the email client will continue to work as usual. However, the experience would be greatly improved if we could align the inbox and mail bar with the fold, keeping each column within the boundaries of a display area. In this way, the content areas are not cut or covered by the device hinge, nor are they displayed on the folded area of the flexible display.

To achieve the desired layout, we introduced a new screen-Spanning media feature and a set of pre-defined environment variables that allow Web developers to make foldable devices another responsive Web design goal. Developers can now create layouts that work for each device category without having to rely strictly on specific hardware parameters. This flexibility improves scalability because it does not need to work repeatedly for each new device type.

Detection display area

The CSS Screen-Spanning media feature helps Web developers test whether the root viewport is spanning multiple adjacent display regions and provides configuration details about these adjacent display regions (such as stacked or side by side).

The screen-spanning media function is specified as a value that describes the number of folds (or hinges) the device has and its position. If the device is not foldable, the value is None. If it is foldable, it can have one of the following two values:

  • Single-fold-vertical: Matches devices that have a single fold (two display areas) and a vertical fold position.
  • Single-fold-horizontal: Matches devices that have a single fold (two display areas) and a horizontal fold position.

Calculates the geometry of the display area

It’s not safe to assume that when screen-spanning, the fold always splits the viewport exactly in two. In addition, some window managers may choose to hide Web content behind the first screen. To help Web developers calculate the size of each display area and make sure they know how much, if any, their content needs to be filled to avoid masks, we’re adding four predefined CSS environment variables.

  • env(fold-top)
  • env(fold-left)
  • env(fold-width)
  • env(fold-height)

The values of these variables are represented in CSS pixels relative to the layout viewport (that is, in client coordinates, as defined by the CSSOM view). When content that is not in the spanning state is evaluated, these values are treated as nonexistent, and the browser uses the fallback values passed to env().

Enhance our email sample application for a dual screen and foldable experience

Let’s put CSS’s screen-spanning media feature and collapse geometry environment variables into practice to enhance the reader view of our email client.

@media screen and (min-width: 799px) {
  /* Tablet-specific rules */
}

@media screen and (min-width: 799px) and (screen-spanning: single-fold-vertical) {
  /* Is basically a single element that contains the three Flex projects highlighted in the figure above */
  main {
    display: flex;
    flex-direction: row;
  }
  .navigation {
    /* ** Flex directions are rows, so flex-basis behaves like the width of this Flex entry ** By design, the required width on foldable/dual screens is 60px */
    flex-basis: 60px;

    flex-grow: 0;
    flex-shrink: 0;
  }

  .inbox {
    /* ** The inbox width will take up the entire width of the first display area, e.g. ** Inbox width = display area 1 width -60 pixels (navigation column width) */
    flex-basis: calc( env(fold-left) - 60px );

    /* ** Some devices have masks, so we need to add margins or gaps after this column ** env(fold-width) = 28 CSS pixels on surface Duo. ** env(fold-width) = 0 CSS pixels on devices without masking content. * /
    margin-inline-end: env(fold-width);

    flex-grow: 0;
    flex-shrink: 0;
  }

  .email-content {
    /* ** Email message contents should "grow" to fill the rest of the space. ** But demonstrate how to calculate the width of the second display area. ** We will manually set the width */
    flex-basis: calc( 100vw - (env(fold-left) + env(fold-width)) );

    flex-grow: 0;
    flex-shrink: 0; }}Copy the code

Enumerate window segments in JavaScript

When using non-DOM targets such as Canvas2d or WebGL, you can use the new Window Segments Enumeration API to get the geometry of each display region.

GetWindowSegments () is a method on the Window object that returns an array of one or more DOMRects representing the geometry and location of each display region.

The array returned is an immutable snapshot of the state of the display region when the method was called. If the user transitions from a bonded state to an unbonded state, or rotates the device, the previously retrieved window segment is invalidated.

const segments = window.getWindowSegments();

// Case 1: Desktop, traditional touch devices, foldable devices do not cross
console.log(segments.length) / / 1

// Case 2: Dual screen and foldable
console.log(segments.length) / / 2
Copy the code

Pages should listen for window resize events or orientationchange events to detect whether the browser has been resized or the device has been rotated, and to retrieve updated display areas.

let segments = window.getWindowSegments();

// State 1: the browser spans two monitors and collapses vertically.
console.log(segments.length); / / 2

// State 2: The user decides to rotate the device, the browser is still crossed, but now the fold is horizontal.
// When the window is resized, resize and orientation change events are triggered
// The resize event is also triggered when the user enters or exits the cross-screen state.
window.addEventListener('resize'.() = > {
  // The fragment we originally retrieved no longer exists
  // When collapsed to level, it is updated with the latest information representing fragment 2
  segments = window.getWindowSegments();
});
Copy the code

There is no clear way to know whether the folding position is vertical or horizontal, as this information can be easily calculated from the returned DOMRects:

function isSingleFoldHorizontal() {
  const segments = window.getWindowSegments();

  // Single foldout means the device has 1 foldout and 2 display areas
  if( segments.length ! = =2 ) {
    return false;
  }

  // Cross break means that the top of the first segment is smaller than the top of the second segment
  if( segments[0].top < segments[1].top ) {
    return true;
  }

  // if we reach this point, the fold is vertical
  return false;
}
Copy the code

The same applies to the fold width, and Web developers can use information provided by getWindowSegments() to know whether the window manager is masking the content rendered behind the fold and whether the fold width is larger than zero pixels.

function foldWidth() {
  const segments = window.getWindowSegments();

  // If there is 1 segment, the fold mask does not apply and returns 0
  If there are more than 2 segments, we do not process this device, but return 0
  if( segments.length ! = =2 ) {
    return 0;
  }

  // The fold is vertical
  // The device looks like this [][]
  if( segments[0].top === segments[1].top ) {
    return segments[1].left - segments[0].right;
  }

  // if we reach this point, the fold is horizontal
  return segments[1].top - segments[0].bottom;
}
Copy the code

For the future

As developers, when we create for today, we tend to plan for the future, so minimal refactoring is required to unlock what’s possible in the future.

Unlike CSS, JavaScript has the concepts of arrays, loops, and conditions, which makes the mapping between window segment enumeration apis and devices with N display areas more straightforward. For the hypothetical device shown above, calling the getWindowSegments() method when the browser spans three display segments returns an array of three DOMRects, using simple language primitives such as loops or built-in array methods, You can learn more about the configuration of the display area (is the screen all the same width? Etc.)

In CSS, the current plan is to simply add new values in the screen-spanning media function that represents the new screen topology.

Start enhancing your site’s foldable experience now

The CSS screen-spanning media and Window Segment Enumeration API can be used after the experimental flag, You can enable them at edge://flags/#enable-experimental-web-platform-features.

Starting with Microsoft Edge 86, Web developers can use Microsoft Edge DevTools to simulate dual-screen & foldable devices on Windows and Mac desktop platforms. Alternatively, you can download and install the new Surface Duo simulator preview (2020.806.1 or later) to test and debug with the built-in Edge browser after enabling the experimental platform feature mark.

The JavaScript Window Segments Enumeration API and CSS Screen-Spanning media functionality are available as Origin Trials, where you can earn tokens and safely try out these new primitives in production, In exchange for our feedback on the API.

The road ahead

After many iterations and improvements from the Chromium Project, Google, Intel, W3C’S CSSWG, Second-screen WG, and others, these apis are ready to experiment today.

We contributed both the DESKTOP CSS and JavaScript primitives to the Chromium open source project, and now DevTools’s foldable and dual-screen device emulation is available not only in Edge, but also in Chrome, and soon in other Chromium-based browsers. Right now, we’re working on improving the Android implementation so that all Chromium-based browsers on the Android operating system can support Web developers and provide exciting new experiences for this flexible device category.