应使用 horizontal-viewport-segments: 2 媒体特性精准识别竖折设备展开态，chrome/edge 119+ 支持，需用 @supports 包裹兼容 safari/firefox，配合防抖监听与 visualviewport.width 获取真实宽度，避免误用已废弃的 screen-spanning。
别用 @media (min-width: 768px) 或 @media (orientation: landscape) 做折叠屏排版——它们根本无法区分 Z Fold 展开态和 iPad 横屏，实际效果等于没适配。
用 horizontal-viewport-segments 判断书本式双屏展开
这是目前唯一能准确识别 Galaxy Z Fold、Pixel Fold 等竖折设备真正展开状态的媒体特性，Chrome/Edge 119+ 支持，值必须是整数 2，不是 >1 也不是 =2：
-
@media (horizontal-viewport-segments: 2)匹配时，document.body.clientWidth返回的是单侧宽度（约 375–420px），不是总宽 - 不能嵌套在其他查询里，比如
@media (min-width: 720px) and (horizontal-viewport-segments: 2)会失效 - 典型布局：左侧固定栏 + 右侧自适应主内容，用
grid-template-areas显式声明区域比 flex 更稳 - Safari/Firefox 完全不支持，必须配合
@supports (horizontal-viewport-segments: 2)包裹，否则整条规则被忽略
用 vertical-viewport-segments 处理翻盖式上下分割
华为 Mate X3、三星 Z Flip 展开后是上下两个独立视口，此时高度被物理切割，horizontal-viewport-segments 不适用：
-
@media (vertical-viewport-segments: 2)才是正确写法，匹配后应优先调整高度相关布局（如vh分配） - 它和
orientation: portrait无关——有些翻盖设备展开后仍是竖屏，仅靠 orientation 会漏判 - 常见错误：把
vertical-viewport-segments: 2和已废弃的screen-spanning: single-fold-vertical混用，后者浏览器直接忽略 - 适合场景：顶部工具栏占 50vh、底部操作区占另 50vh，避免滚动穿透或截断
为什么 screen-spanning 不能用
这个媒体特性压根不存在，Chromium 内部早已标记为“废弃实验性特性”，MDN 已移除文档，所有浏览器都会静默忽略：
- 写
@media (screen-spanning: single-fold-horizontal)，DevTools 里看不到匹配状态，控制台无报错，样式就是不生效 - 它描述的是“当前元素是否跨铰链渲染”，不是“设备是否展开”，语义错位，且在真实设备（Z Fold 6、Mate X3）上常返回
not all - 所有基于它的 polyfill（如 fold-detect v2.x）已在 2026 年全部弃用，维护者明确建议切换至
viewport-segments - 即使强行启用 chrome://flags，也依赖系统跨屏渲染开关、无 iframe 干扰、非缩放状态等苛刻条件，真机上极易失效
JS 监听必须加防抖并读 visualViewport.width
CSS 媒体查询只响应静态状态，但折叠过程存在半开、动画帧、系统延迟上报等中间态，仅靠 CSS 会漏掉关键过渡帧：
- 用
window.matchMedia('(horizontal-viewport-segments: 2)')创建监听器，不要用window.onresize - 必须加至少 100ms 防抖——Z Fold 展开过程中
matchMedia可能连续触发多次 false positive - 读取
visualViewport?.width而非window.innerWidth，前者更贴近用户实际可见区域，不受软键盘弹出干扰 - 不要在监听回调里直接操作大量 DOM；用
requestAnimationFrame批量更新 class 或 style，避免布局抖动
真正难的不是写对那行 @media，而是处理 Safari/Firefox 的降级路径、折叠动画中的抖动、以及单侧 viewport 下 width 计算逻辑和开发者直觉的冲突——这些细节不处理，上线后就会在真实设备上崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
