折叠屏来了，web 开发者该做点啥

说真的，折叠屏手机在科技圈晃悠了好几年了。安卓用户早就玩上了，我们这些吃瓜群众只能眼巴巴看着，时不时对着那些炫酷的产品视频流口水。但苹果这次终于下场了，不管你是果粉还是安卓党，这波操作对 web 开发圈的影响可不小。

我最近一直在关注这个领域（周末还花了不少时间折腾 iPhone Duo 模拟器，确实有点上瘾），有个好消息要告诉大家：支持折叠屏的 web API 比你想象的成熟多了。苹果官方出了六集教程讲怎么给 Duo 做开发，虽然大部分是原生 iOS 的内容，但留给 web 开发者的空间也相当有意思。

今天就来看看有哪些你现在就能用的东西。

Device Posture API：知道你的设备在干嘛

先说 Device Posture API。这个小玩意儿能告诉你用户当前看的是平铺的屏幕、折叠的状态，还是介于两者之间。你可以理解成设备在跟你汇报它现在的"姿势"。

在 JavaScript 里，通过 navigator.devicePosture 来获取，返回值要么是 continuous（普通平铺状态），要么是 folded（像笔记本那样半折着）。在 CSS 里用起来更简洁：

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

这个功能对视频播放器、文档阅读器这类应用来说太有用了。想象一下：设备一折叠，视频控制栏自动跑到下半屏——没开玩笑，真能做到。

Viewport Segments API：给屏幕分区

如果说 Device Posture API 告诉你设备的"姿态"，那 Viewport Segments API 就是在描述它的"身体结构"。当折叠屏半折的时候，屏幕会分成几个独立的区域，这个 API 让你能查询这些区域的信息。

JavaScript 那边用 window.visualViewport.segments，返回一组 DOMRect，描述每个区域的尺寸、形状和位置。CSS 这边更灵活：

/* 根据分区数量来调整布局 */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS 的环境变量用起来特别优雅。env(viewport-segment-width 1 0) 就是取水平索引为 1、垂直索引为 0 的那个区域的宽度。坐标系统刚开始可能有点绕，但搞懂之后能玩出的花样可太多了。

这对你的项目意味着什么

关键问题是——折叠屏早就不是什么小众产品了。它正在走向主流，而 web API 已经准备好支持它了。在 NameOcean，我们一直强调要面向未来做开发，这就是一个活生生的例子。

对创业者和开发者来说，这意味着全新的交互模式成为可能。旅行 app 可以一个屏幕显示地图，另一个显示预订详情。电商网站可以一半展示商品图，一半放用户评价。代码编辑器终于能在手机上实现真正的分屏体验，而且完全不需要原生应用。

那道折痕不是限制，是机会。有了这些 API，你做出来的东西既能充分利用折叠屏的特性，又不会把普通手机用户拒之门外。

怎么开始玩

最棒的是：你不用非得买台折叠屏手机才能开始折腾。Safari Technology Preview 和 Chrome DevTools 都自带模拟器支持。开个虚拟设备，在平铺和折叠状态之间切换，看你的布局实时变化，爽得很。

如果你正在运营一个商业网站或者 web 应用，现在是时候检查一下你的响应式设计策略了。问题不在于折叠屏会不会火起来——而在于你的用户开始带着折叠屏来访问的时候，你准备好了没有。

web 平台一直在进化，而且经常是硬件创新倒逼 API 更新。这些 API 就是最好的证明。好了，轮到你去"折叠"了。