三星 Galaxy Fold 和 Surface Duo 以及华为mate X等系列折叠屏手机问世至今已有三年多的时间。此后，三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、华为mate X2S、荣耀magic V系列等手机均已上市。可折叠设备可供购买，目前正在被消费者使用，随之而来的是我们作为开发人员可以开始探索这种新型设备和响应式设计的下一个发展的机会。
使用新的 CSS 媒体功能检测可折叠设备这些 Web 平台功能与现有概念（例如视口和媒体查询）集成，因此开发人员和设计人员可以花更多时间思考如何利用两个显示器来创建增强体验，而不是学习一组新代码来构建它们。
双屏和可折叠设备只是响应式设计的下一步，因此它们被视为另一个响应式设计目标，我们可以使用媒体功能为其设计样式。我们今天已经使用媒体功能和查询来定位台式机、平板电脑和手机，现在我们拥有 CSS Viewport Segments 媒体功能来定位我们的可折叠和双屏设备。
horizontal-viewport-segments视口分段媒体查询可以有两个值。第一个是horizontal-viewport-segments，这表示设备铰链垂直且视口被硬件铰链拆分或折叠成列时的设备状态。
当horizonal-viewport-segment铰链处于垂直折叠姿势时，目标是设备。
为了专门为这种方向的可折叠设备提供样式，我们将编写以下内容：
@media (horizontal-viewport-segments: 2) {
// Styles specific to the device in this orientation
}
整数表示设备方向中存在的视口数量。当设备像一本书一样处于垂直折叠姿势时，我们在水平方向有两个不同的视口，在垂直方向只有一个视口。
我们还可以结合我们的媒体查询来定位双屏设备和某些视口宽度，以提供特定的样式：
@media (horizontal-viewport-segments: 2) and (min-width: 540px) {
body {
background: yellow;
}
}vertical-viewport-segments
我们的视口分段媒体功能的第二个值是vertical-viewport-segments，这是设备铰链水平时设备的状态，并且硬件铰链将我们的视口分成行。
vertical-viewport-segments目标设备处于水平折叠姿势。
要定位在这个方向旋转的设备，我们将使用以下代码：
@media (vertical-viewport-segments: 2) {
// Styles specific to the device in this orientation
}使用 JavaScript 检测可折叠设备
在某些情况下，您可能无法或不想使用 CSS 媒体查询来检测您的用户是否在可折叠设备上，这就是 JavaScript API 的用武之地。最初，提出了一个名为 Windows Segments Enumeration 的全新 API ，但在开发者社区通过原始试验获得反馈后，在现有的Visual Viewport API 草案规范的基础上构建更有意义。
视口段属性视口段表示位于彼此相邻的单独显示器上的窗口区域。要检测双屏设备，您可以使用以下代码查询 segments 属性：
const segments = window.visualViewport.segments;
此查询返回的值将是一个数组DOMRects，指示有多少视口。如果只有一个视口段，则查询将返回null，并以这种方式实现以防止将来出现兼容性问题，以免开发人员开始使用visualViewport.segments[0]针对单屏设备。
在双屏设备上，查询将返回 2 DOMRects，表示当浏览器窗口跨越折叠时可用的 2 个视口。
我们存储在segments常量中的这个值是查询属性时设备状态的不可变快照，如果浏览器窗口调整大小或设备旋转，之前检索到的视口段不再有效，需要查询再次通过调整大小或方向事件（或两者）。
如果您调整浏览器窗口的大小以仅跨越一个显示区域，我们将触发调整大小事件。
如果您旋转设备，这将触发调整大小和方向事件，您可以使用这些事件再次查询属性以获取浏览器显示区域的当前状态。
window.addEventListener("resize", function() {
const segments = window.visualViewport.segments;
console.log(segments.length); *// 1*
});何时使用 JAVASCRIPT API 与 CSS 媒体功能来检测 设备
CSS 媒体功能和 JavaScript 段属性都将检测双屏设备，但 JavaScript 属性最好在没有使用 CSS 时使用，当您在 Canvas2D 和 WebGL 中处理对象时可能会发生这种情况。例如，您正在开发的游戏可以同时利用两个屏幕。
使用 CSSenv()变量除了 CSS 媒体功能之外，还引入了六个新的 CSS 环境变量，以帮助开发人员计算显示区域的几何形状，计算铰链区域在被 Surface Duo 等物理硬件功能遮挡时的几何形状，以及它们还可用于帮助将内容放置在每个显示区域的边界内。
六个新的环境变量如下：
- 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二维网格，坐标0,0从左上段开始。
