@supports (horizontal-viewport-segments: 2) 是唯一稳定识别竖折展开态的标准方法，值必须为纯数字2、不可加引号或单位，且需单独处理横折设备的 vertical-viewport-segments，不可混用或与 min-width 组合。
@supports (horizontal-viewport-segments: 2) 是唯一能稳定识别竖折展开态的写法
它不是媒体查询，是特性检测，必须用 @supports 包裹，否则 Chrome/Edge 119+ 以外的所有浏览器会直接跳过整条规则，不报错也不生效。
常见错误现象：@media (horizontal-viewport-segments: 2) 写法完全无效；@supports (horizontal-viewport-segments: "2") 或 @supports (horizontal-viewport-segments: 2px) 也会失败——值必须是纯数字 2，不能加引号或单位。
实操建议：
- 只用于竖折设备（如 Galaxy Z Fold、Mate X5），展开后左右各一个 viewport，
document.body.clientWidth返回的是单侧宽度（约 375–420px） - 横折设备（如 Pocket 2、Z Flip 展开）必须用
@supports (vertical-viewport-segments: 2)单独处理，二者不可混用 - 不要和
min-width混写，比如@supports (horizontal-viewport-segments: 2) and (min-width: 720px)是逻辑矛盾——前者生效时视口宽度实际只有 ~400px
为什么 screen-spanning 不能用来判断展开/折叠态
screen-spanning 这个媒体特征根本不存在。Chrome/Edge 从未正式实现它，MDN 已移除文档，DevTools 里也看不到匹配状态。你写 @media (screen-spanning: single-fold-vertical)，浏览器直接忽略，不报错也不触发回调。
它描述的不是“设备是否展开”，而是“当前元素是否被强制画在两个物理屏幕上”——这个行为受系统渲染开关、iframe 环境、缩放状态等多重限制，真机上极易返回 not all 或静默失败。
实操建议：
- 所有基于
screen-spanning的 polyfill（如 fold-detect v2.x）已在 2026 年全部弃用 - Chromium 内部早已标记该特性为“废弃”，连测试覆盖率都已移除
- 用它做判断，上线后样式大概率白屏或错乱，且无法 debug
降级方案必须分设备类型组合判断
当 @supports 不成立（Safari/Firefox/旧 Chrome），不能只靠 min-width 回退，否则 iPad 会被误判为折叠屏展开态。
真实设备数据：Z Fold 展开后单侧宽度约 390px，iPad 竖屏宽度就超 768px；而 Z Fold 折叠态宽度约 280–360px，Pocket 2 折叠态高度又可能低于 600px。
实操建议：
- 竖折设备降级可组合：
@media (min-width: 720px) and (min-aspect-ratio: 18/10)—— 排除 iPad（比例约 1.4） - 横折设备降级需换用高度为主：
@media (min-height: 840px) and (max-aspect-ratio: 1/2) - 必须配合 JS 检测
navigator.userAgent.includes('Fold')或'Pocket'做二次确认，避免宽高比误判
JS 监听 matchMedia 必须加防抖，且读 visualViewport.width
CSS 媒体查询只响应静态状态，折叠过程中的半开、动画帧、系统延迟上报会导致 window.matchMedia 频繁触发 false positive，UI 会疯狂抖动。
更糟的是：window.innerWidth 在折叠动画中可能卡在中间值（比如 500px），而 visualViewport.width 才真正反映当前渲染区域宽度，且在 Chrome/Edge 中支持得更及时。
实操建议：
- 监听代码必须带 100ms 防抖，避免连续重绘
- 不要监听
resize事件替代媒体查询——它在折叠动画中抖动更剧烈 - 优先用
visualViewport.width，fallback 到window.innerWidth，但不要混用
关键点在于：物理铰链分割态无法靠宽高猜，horizontal-viewport-segments 和 vertical-viewport-segments 是目前唯一标准路径，但它们只在 Chrome/Edge 119+ 中可用，且必须严格按语法书写、单独处理不同折叠方向。任何试图用单一断点覆盖所有折叠设备的方案，上线后都会在真实机型上出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
