真正能上线的只有 horizontal-viewport-segments 和 vertical-viewport-segments，仅 Chrome/Edge 119+ 支持；@supports (horizontal-viewport-segments: 2) 是唯一稳定识别竖折设备完全展开的方式，必须包裹在 @supports 块中且值为数字 2；横折设备需用 vertical-viewport-segments 单独处理，CSS 无法感知半开状态，需 JS + visualViewport.width + 防抖配合。
别用 screen-spanning，它已被废弃且浏览器根本不解析；真正能上线的只有 horizontal-viewport-segments 和 vertical-viewport-segments，仅 Chrome/Edge 119+ 支持，Safari/Firefox 完全不认。
为什么 min-width: 720px 单独用会误判 iPad
折叠屏展开后，document.body.clientWidth 返回的是单侧宽度（Z Fold 约 375–420px），不是总宽；而 iPad 竖屏就超 768px，光靠宽度会把平板全卷进来。更糟的是，orientation: landscape 在 Z Fold 半开状态可能仍报 portrait，根本不可靠。
- 必须组合宽高比过滤：用
@media (min-width: 720px) and (min-aspect-ratio: 18/10)排除 iPad（比例约 1.4） - 但这个断点只适合“视觉上像桌面”的展开态，不能反映物理铰链分割——比如 Z Fold 半开时，它既不匹配
horizontal-viewport-segments: 2，也不满足 720px+18/10，此时 CSS 无能为力 - 真机调试时，
window.matchMedia的回调可能在半开过程中频繁触发 false positive，不加防抖 UI 会抖动
@supports (horizontal-viewport-segments: 2) 怎么写才不崩
这是目前唯一能稳定识别竖折设备（如 Z Fold）完全展开的 CSS 方式，但它不是媒体查询，是特性检测，必须包裹在 @supports 块里，否则旧浏览器直接跳过整条规则。
- 正确写法：
@supports (horizontal-viewport-segments: 2) { .sidebar { grid-column: 1; } .main { grid-column: 2; } } - 错误写法：
@media (horizontal-viewport-segments: 2) { ... }—— 浏览器会忽略整条规则，无报错也无提示 - 不能和
min-width混用：@supports (horizontal-viewport-segments: 2) and (min-width: 720px)是逻辑矛盾，前者生效时视口宽度实际只有 ~400px - 值必须是数字
2，写成2px或引号"2"都无效
横折设备（如 Mate X3）要用 vertical-viewport-segments
竖折和横折的物理分割方向不同，渲染行为完全不同：horizontal-viewport-segments: 2 表示左右双 viewport，vertical-viewport-segments: 2 表示上下双 viewport。一套 Grid 布局无法通吃两者。
立即学习“前端免费学习笔记（深入）”；
- 横折展开后，
document.body.clientHeight才是单侧高度（约 400–450px），此时该用grid-template-rows而非grid-template-columns - 必须分开写：
@supports (vertical-viewport-segments: 2) { grid-template-rows: 1fr 1fr; } - 不能 fallback 到同一套变量名，比如用
--fold-direction: horizontal同时覆盖两种场景——它们的 DOM 流向、滚动行为、焦点管理都不同 - JS 监听也要区分：
matchMedia('(vertical-viewport-segments: 2)')和matchMedia('(horizontal-viewport-segments: 2)')必须各自独立处理
最易被忽略的一点：CSS 无法感知“半开”状态。铰链中间态、系统延迟上报、WebView 层屏蔽都会导致 matchMedia 失效或滞后。真机适配必须靠 JS + visualViewport.width 校验 + 100ms 防抖，纯 CSS 只能覆盖“明确展开”和“明确折叠”两个稳态。
