真正能上线的只有 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 块里，否则旧浏览器直接跳过整条规则。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 正确写法：@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 只能覆盖“明确展开”和“明确折叠”两个稳态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！