关于microsoft:引入适用于双屏和可折叠设备的Web-API

作者：CHRIS CASTLE
原文：https://blogs.windows.com/msedgedev
译者：杜尼卜

微信搜寻【前端全栈开发者】关注这个脱发、摆摊、卖货、继续学习的程序员的公众号，第一工夫浏览最新文章，会优先两天发表新文章。关注即可大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！

浏览器是所有设施上应用最宽泛的利用之一，现在，它运行在全新的硬件类别上：双屏和可折叠设施。

随着各种新的双屏和可折叠设施进入市场，包含 MicrosofteSurface Duo，当初再没有比当初更好的工夫来思考你的网站如何采纳这些形状。

明天，咱们很快乐地发表推出两项新的试验性功能，这两项性能将帮忙 Web 开发人员无效地在逾越多个显示区域的浏览器窗口中布局内容，并创立响应式网站，以天然地适应这一类新设施。

CSSscreen-spanning media feature 和一组环境变量来形容折叠的几何形态。
JavaScriptwindow segments enumeration API，在解决 Canvas2d 和 WebGL 等非 DOM 指标时很有用。

狭义上讲，可折叠设施有两种变体：双屏设施和利用柔性显示技术的单屏设施。两者有很多共同点：它们是便携式的多姿态设施，容许用户旋转，翻转和折叠。

依照这种尺寸，应用程序能够位于一侧，也能够跨两个显示区域。响应这种逾越状态的网站与逻辑上划分出现内容的语义和用意集成在一起。

这类设施所实现的广大的屏幕空间和独特的姿势，让 Web 开发者能够在一个能够装进口袋或钱包的设施中开启前所未有的网络体验。

尽管现有的网站会持续应用开箱即用的形式，但让网站意识到设施的可折叠性，能够大大晋升用户体验。

为了更好地阐明这个机会，并展现新创建的浏览器个性是如何工作的，咱们将带你加强一个电子邮件客户端布局示例。

并排显示收件箱的列表视图和电子邮件的内容是一种常见的模式，天然适宜较大的查看区域。当浏览器窗口逾越双屏设施上的两个显示区域时，总的视口宽度很可能与传统的程度平板电脑设备相当。

未经批改，电子邮件客户端将持续像平常一样工作。然而，如果咱们可能将收件箱和邮件栏与折页对齐，将每个栏目都放弃在一个显示区域的边界内，那么体验将失去极大的改善。这样，内容区域都不会被设施铰链切割或遮蔽，也不会在柔性显示器的折叠区域上出现。

为了实现理想的布局，咱们引入了一个新的 screen-spanning 媒体性能和一组事后定义的环境变量，容许 Web 开发人员将可折叠设施作为另一个响应式 Web 设计指标。开发人员当初能够创立实用于每种设施类别的布局，而无需严格依赖特定的硬件参数。这种灵活性进步了可扩展性，因为它不须要为每个新设施类型反复工作。

CSS screen-spanning 媒体性能将帮忙 Web 开发人员测试根视口是否被逾越到多个相邻的显示区域，并提供对于这些相邻显示区域的配置细节（如重叠或并排）。

screen-spanning 媒体性能被指定为一个值，该值形容设施具备的折叠（或铰链）数量及其姿态。如果该设施不是可折叠设施，则该值为 none。如果它是可折叠的，则能够具备以下两个值之一：

Single-fold-vertical：匹配具备单个折叠（两个显示区域）且折叠姿态为垂直的设施。
Single-fold-horizontal：匹配具备单个折叠（两个显示区域）且折叠姿态为程度的设施。

假如当处于 screen-spanning 状态时，折叠总是要把视口正好分成两半，这是不平安的。此外，某些窗口管理器可能会抉择暗藏首屏后的 Web 内容。为了帮忙 Web 开发人员计算每个显示区域的大小，并确保他们晓得他们的内容（如果有的话）须要填充多少以防止遮罩，咱们正在增加四个预约义的 CSS 环境变量。

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

这些变量的值是以 CSS 像素示意的，并且是绝对于布局视口而言的（即在客户端坐标中，如 CSSOM 视图所定义）。当对不处于逾越状态的内容进行评估时，这些值将被视为不存在，并且浏览器将应用传递给 env()函数的回退值。

让咱们将 CSS 的 screen-spanning 媒体性能和折叠几何环境变量付诸实践，加强咱们电子邮件客户端的读者视图。

@media screen and (min-width: 799px) {/* 特定于平板电脑屏幕的规定 */}

@media screen and (min-width: 799px) and (screen-spanning: single-fold-vertical) {
  /* 次要是一个元素，其中蕴含上图中突出显示的 3 个 flex 我的项目 */
  main {
    display: flex;
    flex-direction: row;
  }
  .navigation {
    /* 
    ** flex 方向是行，因而 flex-basis 的行为相似于此 flex 项的宽度
    ** 依据设计，可折叠 / 双屏上的所需宽度为 60px
    */
    flex-basis: 60px;

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

  .inbox {
    /* 
    ** 收件箱宽度会占用第一个显示区域的整个宽度，例如
    ** 收件箱宽度 = 显示区域 1 宽度 -60 像素（导航列宽度）*/
    flex-basis: calc(env(fold-left) - 60px );

    /* 
    ** 有些设施具备遮罩，因而咱们须要在此列之后增加边距或间隙
    ** env(fold-width) = surface Duo 上的 28 个 CSS 像素。** env(fold-width) = 0 不屏蔽内容的设施上的 CSS 像素。*/
    margin-inline-end: env(fold-width);

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

  .email-content {
    /* 
    ** the email content column should "grow" to fill the rest of the space
    ** but to demonstrate how to calculate the width of the 2nd display region
    ** we will manually set the width
    */
    flex-basis: calc(100vw - (env(fold-left) + env(fold-width)) );

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

当应用非 DOM 指标（如 Canvas2d 或 WebGL）时，你能够应用新的 Window Segments Enumeration API 取得每个显示区域的几何体。

getWindowSegments() 是 Window 对象上的一个办法，它返回一个由 1 个或多个 DOMRects 组成的数组，这些 DOMRects 代表每个显示区域的几何形态和地位。

返回的数组是该办法被调用时显示区域状态的不可扭转的快照。如果用户从跨接状态过渡到非跨接状态，或者旋转设施，则之前检索到的窗口段将有效。

const segments = window.getWindowSegments();

// case 1: desktops, traditional touch screen devices, foldable device not spanned
console.log(segments.length) // 1

// case 2: dual-screen and foldable 
console.log(segments.length) // 2

页面应该监听窗口调整大小 (resize) 事件或方向扭转 (orientationchange) 事件，以检测浏览器是否被调整大小，或设施是否被旋转，并检索更新的显示区域。

let segments = window.getWindowSegments();

// state 1: browser is spanned across 2 displays and fold is vertical.
console.log(segments.length); // 2

// state 2: user decided to rotate the device, browser is still spanned but fold is now *horizontal*
// on window resize, both resize and orientationchange events fire
// resize events will also fire when user go in or out of spanned state.
window.addEventListener('resize', () => {
  // segments we initially retrieved are no longer
  // update with latest information representing segments the 2 when the fold is horizontal
  segments = window.getWindowSegments();});

没有明确的办法来理解折叠姿态是垂直还是程度，因为能够从返回的 DOMRects 中轻松计算出此信息：

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

  // single fold means the device has 1 fold and 2 display regions
  if(segments.length !== 2) {return false;}

  // horizontal fold means 1st segment top is smaller than 2nd segment top
  if(segments[0].top < segments[1].top ) {return true;}

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

同样实用于折叠宽度，Web 开发人员能够应用 getWindowSegments() 提供的信息来理解窗口管理器是否覆盖了出现在折叠前面的内容，以及折叠宽度是否大于零像素。

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

  // if there's 1 segment, fold mask is not applicable, return 0
  // if there's more than 2 segments, we don't deal with this kind of device, yet, return 0
  if(segments.length !== 2) {return 0;}

  // fold is vertical
  // 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;
}

作为开发者，咱们在为明天发明的时候，往往会对将来进行布局，所以须要进行最低限度的重构，以解锁将来可能呈现的场景。

与 CSS 不同，JavaScript 有数组、循环和条件的概念，这使得窗口段枚举 API 和有 N 个显示区域的设施之间的映射更加间接。对于上图所示的假想设施，当浏览器横跨 3 个显示区域时，调用 getWindowSegments() 办法将返回一个由 3 个 DOMRects 组成的数组，应用简略的语言基元，如循环或内置的数组办法，你能够理解更多对于显示区域的配置状况（例如屏幕都是雷同的宽度？等）

在 CSS 中，目前的打算是简略地在代表新的屏幕拓扑构造的 screen-spanning 媒体性能中增加新的值。

CSS screen-spanning 媒体性能和 Window Segment Enumeration API 是能够在实验性标记前面应用的，你能够在 edge://flags/#enable-experimental-web-platform-features 处启用它们。

从 Microsoft Edge 86 开始，Web 开发者能够应用 Microsoft Edge DevTools 在 Windows 和 Mac 桌面平台上模仿双屏 & 可折叠设施。另外，你也能够下载并装置新的 Surface Duo 模拟器预览版（2020.806.1 或更新版本），在启用实验性平台性能标记后，应用内置的 Edge 浏览器进行测试和调试。

JavaScript Window Segments Enumeration API 和 CSS screen-spanning 媒体性能均以 Origin Trials 的模式提供，你能够取得代币并在生产中平安地试用这些新基元，以换取咱们对 API 的反馈。

这些 API 在 Chromium 我的项目、Google、Intel、W3C 的 CSSWG、第二屏 WG 等多方单干下，通过屡次迭代和改良后，明天就能够供你试验了。

咱们将桌面平台的 CSS 和 JavaScript 基元都奉献给了 Chromium 开源我的项目，当初 DevTools 的可折叠和双屏设施仿真不仅能够在 Edge 中应用，还能够在 Chrome 中应用，很快就能够在其余基于 Chromium 的浏览器中应用。目前，咱们正在致力晋升 Android 的实现，使所有基于 Chromium 的浏览器在 Android 操作系统上都能反对 Web 开发人员为这个灵便的设施类别提供令人兴奋的新体验。

如果你对任何一个 API 有反馈，请在 GitHub 上开一个问题让咱们晓得，或者你也能够在 Twitter 上分割咱们（@_zouhir 或 @MSEdgeDev）。

关于microsoft:引入适用于双屏和可折叠设备的Web-API

可折叠设施类

从传统的间断屏幕过渡到双屏和可折叠屏

检测显示区域

计算显示区域的几何形态

加强咱们的电子邮件示例应用程序，以实现双屏和可折叠的体验

在 JavaScript 中枚举窗口段

面向未来

立刻开始加强你的网站的可折叠体验

后方的路