必须单独使用@media (horizontal-viewport-segments: 2)并用@supports包裹，它是chrome/edge 119+唯一准确识别z fold真正展开的媒体特性，值必须为整数2，不可比较或拼接其他条件，firefox/safari不支持需降级。
直接用 @media (horizontal-viewport-segments: 2)，别拼其他条件，也别信 screen-spanning——它根本不存在，浏览器会静默忽略。
为什么必须单独写 @media (horizontal-viewport-segments: 2)
这个媒体特性是 Chrome/Edge 119+ 唯一能准确识别 Z Fold 类设备“真正展开”的信号。它不看宽度、不看方向，只回答一个问题：“当前是否被水平铰链物理分割为左右两个独立视口？”
常见错误现象：
-
@media (min-width: 720px)在 Z Fold 展开时返回单侧宽度（约 375px），布局错乱 -
@media (horizontal-viewport-segments > 1)写法无效——值必须是整数2，不能带比较符 -
@media (min-width: 768px) and (horizontal-viewport-segments: 2)在部分浏览器中整条规则被丢弃
必须用 @supports 包裹，否则降级失效
Firefox 和 Safari 完全不支持这两个特性，不加 @supports，样式就直接不生效，连 fallback 都没机会触发。
正确写法：
@supports (horizontal-viewport-segments: 2) {
@media (horizontal-viewport-segments: 2) {
.sidebar { flex-basis: 320px; }
.editor { flex-basis: calc(100vw - 320px); }
}
}
关键点：
- 不要把
@supports和@media顺序颠倒 - 不要在
@supports外层再写通用样式覆盖双屏逻辑，变量会被后声明的覆盖 - 降级方案建议用
@media (min-width: 720px) and (min-height: 840px)+ UA 检查组合
vertical-viewport-segments: 2 是给翻盖机用的，别混用
它专用于 Pocket、Z Flip 这类横折设备，表示屏幕被垂直铰链切成上下两块。和 horizontal-viewport-segments 是互斥的物理状态，不是“同一设备的不同模式”。
典型误用：
- 对 Z Fold 写
vertical-viewport-segments: 2→ 永远不匹配 - 写成
vertical-viewport-segments: 1或3→ 合法值只有1（单屏）和2（双段） - 和
horizontal-viewport-segments共用同一组 CSS 变量 → 状态冲突，:root中后声明的会覆盖前声明的
JS 监听要读 visualViewport.width，且必须防抖
CSS 媒体查询只响应静态状态，但折叠过程有半开、动画帧、系统延迟上报等中间态，matchMedia 会频繁触发 false positive。
安全做法：
- 监听
visualViewport.width，不是window.innerWidth（后者在折叠动画中可能滞后或跳变） - 加 100ms 防抖，避免 UI 疯狂重绘
- 配合
screen.orientation校验，排除旋转干扰 - 别依赖
document.body.clientWidth算“总宽”——它始终返回单侧宽度，比如375px
最易被忽略的一点：双栏布局别靠 width: 50% 或 flex: 1 均分，因为单侧 viewport 宽度不稳定；固定列宽（如 320px / calc(100vw - 320px)）或 Grid 的 1fr 1fr 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
