HTML5 中不存在 WindowSegments API，它已被废弃；当前标准化方案是 CSS @media (spanning) 和 JavaScript window.screenSpanning，辅以 env(fold-top/bottom) 和 viewport 尺寸检测实现渐进式折叠屏适配。
HTML5 中并没有 WindowSegments API，这是常见的误解。目前（截至 2024 年），WindowSegments 不是 HTML5 标准的一部分，也未被主流浏览器原生支持。它曾是早期折叠屏 Web API 探索阶段的一个实验性提案（如在某些 Chromium 内部版本或旧版 Samsung Internet 实验中短暂出现），但已被废弃，未进入 W3C 标准，也不在现代 Chrome、Edge、Firefox 或 Safari 中可用。
真正可用的折叠屏适配方案：window.screenSpanning 和 CSS @media (spanning)
当前唯一被标准化并实际落地的支持方式是 CSS 的 @media (spanning) 查询，配合 JavaScript 中的 window.screenSpanning 属性（仅限部分 Android 折叠设备上的 Chromium 内核浏览器，如 Chrome 114+）。
Windows 日历同步
下载
将提醒同步至 Windows/Outlook 日历。用户提及「提醒我」「设置提醒」「加到日历」「同步到日历」「日程」「calendar」「日历」时触发。支持Microsoft Graph API 设备代码流认证，无需 Web 服务器，直接写入用户 Outlook 日历。
-
@media (spanning: single-fold-horizontal)：匹配横置折叠态（屏幕沿水平中线折叠，上下两屏），适合将 UI 拆分为顶部工具栏 + 底部内容区 -
@media (spanning: single-fold-vertical)：匹配竖置折叠态（左右两屏），适合分栏布局（如左侧导航 + 右侧详情） -
window.screenSpanning返回"single-fold-vertical"或"single-fold-horizontal"，可用于动态调整 JS 行为（如初始化双面板组件）
更通用且稳定的做法：基于 viewport 尺寸与折叠线索的渐进式适配
由于 screenSpanning 兼容性有限（仅限少数安卓折叠设备），生产环境推荐组合使用：
-
CSS 媒体查询 +
env(fold-top)/env(fold-bottom)：Samsung Internet 和新版 Chrome 支持这些环境变量，可获取折痕位置（单位 px），用于避开折叠区域布局 -
监听
resize事件 + 检测宽高比与断点：例如当window.innerWidth > 1200px && window.innerHeight ，大概率处于横置展开态；而 <code>innerWidth ≈ 600–800px × 2且devicePixelRatio ≥ 2.5可辅助判断双屏 -
使用
matchMedia主动查询折叠特征：const foldQuery = window.matchMedia('(display-mode: fullscreen) and (min-width: 1200px)');<br> if (foldQuery.matches) { /* 启用双屏优化逻辑 */ }
实用布局模式建议（不依赖废弃 API）
-
单页双栏流式布局：用
display: grid配合grid-template-columns: 1fr 1fr，在@media (spanning: single-fold-vertical)下生效；折叠后自动回退为单列 -
折叠感知导航：JS 检测到
window.screenSpanning === 'single-fold-vertical'时，激活左侧持久化导航栏，右侧加载详情页，避免跨屏跳转丢失状态 -
避开折痕的内容定位：利用
position: fixed; top: env(fold-top);将操作按钮下移至折痕上方安全区，防止被硬件遮挡
