iPhone Duo对Web开发意味着什么
内容提要
作者利用iPhone Duo折叠屏探索Web API：通过Device Posture API判断设备折叠状态，用Viewport Segments API获取屏幕分区信息，并基于Video.js v10组件和CSS复刻Netflix折叠播放器，实现视频在上、控件在下及底部反射效果。但全屏API需开启实验标志，且Chromium仅在上半屏显示全屏内容，该界面在iPhone Duo和Pixel Fold上均无法真正实现。
延伸解读
折叠屏 Web API 的现状与限制
文章展示了 Device Posture API 和 Viewport Segments API 在识别折叠状态与屏幕分区上的可用性，但关键的全屏 API 仍需实验标志，且 Chromium 仅在上半屏渲染全屏内容。这意味着开发者目前无法在 iPhone Duo 或 Pixel Fold 上实现真正的跨屏全屏体验，相关 API 的成熟度与浏览器支持仍有限。
用 Video.js 组件复刻 Netflix 折叠播放器的实践
作者基于 Video.js v10 的组件化架构，通过 CSS 媒体查询和视口分段环境变量，将视频置于上半屏、控件置于下半屏，并利用 canvas 复制帧实现底部反射效果。这证明现有 Web 技术可以逼近原生折叠 UI，但全屏限制导致最终效果无法在真实设备上完整呈现。
跨平台折叠体验的差异与风险
尽管 CSS 媒体查询在 iPhone Duo 和 Pixel Fold 上均能正确报告折叠姿态与分段信息，但 Chromium 会刻意裁剪下半屏的全屏内容。开发者需注意：不同浏览器对折叠 API 的实现策略不一致，且苹果可能因功耗与人体工学顾虑长期不开放全屏 API，跨平台方案需预留降级路径。
Q&A
iPhone Duo 上可用的 Web API 有哪些？
主要有两个：Device Posture API 用于判断设备是否处于折叠状态，可通过 JavaScript 的 navigator.devicePosture 或 CSS 的 @media (device-posture: folded) 使用；Viewport Segments API 用于获取屏幕分区信息，JavaScript 中通过 window.viewport.segments 获取 DOMRect 数组，CSS 中可通过媒体查询和 env() 环境变量访问各分区尺寸和位置。
如何用 CSS 检测折叠屏的折叠状态和屏幕分区？
使用 @media (device-posture: folded) 检测折叠状态；使用 @media (horizontal-viewport-segments: n) 和 @media (vertical-viewport-segments: n) 响应分区数量；使用 env(viewport-segment-width 1 0) 等环境变量获取特定分区的尺寸和位置，参数为水平和垂直索引。
为什么在 iPhone Duo 上无法用 Web 技术实现 Netflix 的折叠播放器界面？
因为 Apple 不允许自定义视频元素进入全屏，只能使用原生控件。虽然 Fullscreen API 可通过实验标志开启，但 Apple 出于人机工程和功耗考虑，很可能不会开放该 API。此外，在 Pixel Fold 的 Chromium 上，全屏内容也只显示在上半屏，下半屏被裁剪。
如何用 Video.js 和 CSS 复刻 Netflix 折叠播放器的布局？
首先使用 Video.js v10 的组件和 CSS，通过媒体查询检测垂直折叠状态，然后使用 env() 环境变量定位视频和控件，将视频放在上半屏，控件放在下半屏。注意定位时可能遇到环境变量使用偏差，需调整。
如何实现视频在底部屏幕的反射效果？
由于 -webkit-box-reflect 对 <video> 元素无效，采用类似 YouTube 环境模式的方法：将每一帧复制到小画布上，然后翻转、模糊并淡化画布，最后将画布置于控件后方作为反射效果。
在 Pixel Fold 上测试折叠播放器界面遇到了什么问题？
在 Pixel 9 Pro Fold 模拟器上运行 Chromium 157，尽管 CSS 媒体查询正确报告了折叠状态和分区，但全屏内容只显示在上半屏，下半屏被有意裁剪，导致 Netflix 风格的界面无法完整呈现。
