Foldable API 源试用

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome 正在试用两种 API：Device Posture API 和视口细分 Enumeration API（在 Chrome 中以源试用的形式提供） 125。这些 API 统称为 Foldable API，旨在帮助 开发者以可折叠设备为目标这篇博文介绍了这些 API 介绍了如何开始测试它们。

主要有两种不同的物理外形规格：只有一个单独的设备 柔性屏幕（无缝）和双屏幕设备（带接缝，也称为 和双屏设备一样）。

示意图：左侧是单柔性屏幕（无缝），右侧是两个屏幕（带接缝，也称为双屏幕）。

这些设备给开发者带来了挑战和机遇。它们提供 观看内容的其他方式。例如，某用户可能会持有 像图书一样无缝地使用设备，然后改为像平板电脑一样使用， 平板电视。具有两个屏幕的设备在屏幕之间具有物理连接 可能需要考虑的因素。

这些新的 API 为开发者提供了提供更好的用户体验的方法 。每个 API 都以两种形式公开所需的网络平台原语 支持 CSS 和 JavaScript。

设备安全状况 API

可折叠设备具备相应的功能，可改变其折叠状态，或 设备的实际状态用户可更改设备规格 内容作者提供不同的用户体验，这些新 API 让 确保 Web 内容能够响应各种折叠状态。

设备可以处于两种状态：

  • folded：笔记本电脑或书籍的折叠状态。

设备处于平展或平板电脑折叠状态以及无缝曲线显示屏的示意图。

  • continuous：平面显示屏、平板电脑显示屏或无缝曲面显示屏。

设备处于笔记本电脑或图书折叠状态的示意图。

CSS

Device Posture API 规范定义了新的 CSS media-feature - device-posture。 此媒体功能会解析为一组固定折叠状态。这些状况包括 多个预定义值，每个值都包含 设备。

“device-posture”特征的值与之前的说明一致 可能的状态：

  • folded
  • continuous

如果未来市场上出现新设备，可能会增加新的安全状况。

示例：

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

如需查询设备的折叠状态，可以使用新的 DevicePosture 对象。

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

为了响应设备折叠状态变化（例如用户完全打开设备并 因此从 folded 迁移到 continuous，请订阅 change 事件。

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

视口细分 API

视口段是 CSS 环境变量，用于定义 视口逻辑上独立的区域的尺寸。视口细分 按一个或多个硬件功能（例如 折叠边或合页，用作分隔线。细分受众群是 可视为逻辑上不同的视口区域， 作者。

CSS

通过以下两种新媒体功能，可以看出逻辑划分的数量： CSS 媒体查询第 5 级规范所定义： vertical-viewport-segments和horizontal-viewport-segments。它们会解析为 视口的分割线数量

此外，还添加了新的环境变量， 每个逻辑部门。这些变量包括：

  • env(viewport-segment-width x y)
  • env(viewport-segment-height x y)
  • env(viewport-segment-top x y)
  • env(viewport-segment-left x y)
  • env(viewport-segment-bottom x y)
  • env(viewport-segment-right x y)

每个变量都有两个维度，分别表示 x 和 y 位置。 分别位于由硬件特征创建的二维网格中， 用于分隔细分受众群

<ph type="x-smartling-placeholder">
</ph> 显示水平和垂直细分的示意图。第一个水平线段为 x 0 和 y 0，第二个 x 1 和 y 0。第一个垂直线段是 x 0 和 y 0，第二个 x 0 和 y 1。 <ph type="x-smartling-placeholder">
</ph> 第一个水平线段为 x 0 和 y 0，第二个 x 1 和 y 0.第一个垂直线段是 x 0 和 y 0，第二个 x 0 和 y 1。

以下代码段是创建拆分用户体验的简化示例，其中 折叠边的每一侧都有两个内容部分（col1 和 col2）。

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

以下照片展示了该体验在实体设备上的展示效果。

可折叠手机处于纵向图书模式。

处于横屏模式的可折叠手机。

处于横屏模式的可折叠平板电脑。

JavaScript

要获取视口片段的数量，请查看 segments 条目中的 visualViewport。

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

segments 数组中的每个条目表示 并使用 DOMArray 来表示坐标和大小。segments 字段是查询时指定状态的快照，以便接收更新后的 您需要监听折叠状态变化或调整大小事件，并重新查询 segments 属性。

试用 Foldable API

Foldable API 以 源试用 从 Chrome 125 到 Chrome 128。请参阅 开始源试用 了解有关源试用的背景信息。

对于本地测试，可通过实验性 Web 应用 在 chrome://flags/#enable-experimental-web-platform-features。它还可以是 方法是从命令行运行 Chrome 浏览器 --enable-experimental-web-platform-features。

演示

如需查看演示，请参阅演示 代码库。如果您没有 您可以选择 Galaxy Z Fold 5 或 华硕 Zenbook Fold 在 Chrome 开发者工具中模拟设备，并在两个设备之间 连续纸和折叠。您还可以在设计时 。

Chrome 开发者工具模拟可折叠设备。