应使用@media (horizontal-viewport-segments: 2)识别z fold等竖折双屏展开态，因其是chrome/edge 119+、safari 16.4+唯一稳定支持的媒体特性，需配合@supports包裹且不可嵌套其他查询，同时js监听须基于visualviewport.width加防抖处理。
直接用 @media (horizontal-viewport-segments: 2)，别碰 screen-spanning 或 prefers-holographic —— 前者已废弃，后者压根没进标准，真机上基本不生效。
为什么 @media (min-width: 720px) 在 Z Fold 展开时完全失效
因为展开后 document.body.clientWidth 返回的是单侧宽度（约 375–420px），不是总宽；浏览器把双视口当两个独立渲染区处理，window.innerWidth 仍报窄值。你写 @media (min-width: 720px)，它根本匹配不上。
- 折叠动画中
resize事件严重节流，Pixel Fold 上常只触发 1 次，靠它监听不可靠 -
orientation: landscape也无效：Z Fold 横向展开仍是竖屏方向，screen.orientation.type返回portrait-primary - 所有基于像素断点的写法（如
min-width: 1024px）会误卷入平板和笔记本，却漏掉 Pocket 2 展开态（仅 363px 宽但需双栏）
怎么写 @media (horizontal-viewport-segments: 2) 才真正生效
这是目前 Chrome/Edge 119+、Safari 16.4+ 唯一稳定识别竖折双屏（如 Z Fold 展开）的媒体特性，但语法和环境容错极低。
- 必须写成
@media (horizontal-viewport-segments: 2)，不能是>1、=2或带单位 - 不能嵌套在其他查询里，例如
@media (min-width: 720px) and (horizontal-viewport-segments: 2)会被部分浏览器静默丢弃 - 必须配合
@supports (horizontal-viewport-segments: 2)包裹，否则旧浏览器直接忽略整块样式 - 匹配时，
:root中设变量比直接写样式更可控：@supports (horizontal-viewport-segments: 2) { :root { --fold-state: horizontal; } }
JS 监听必须读 visualViewport.width 并加防抖
媒体查询只管静态状态，折叠过程中的半开帧、系统延迟上报会导致 matchMedia 频繁切换，不加处理 UI 会疯狂重排。
- 监听要在脚本加载时立即执行，不能等
DOMContentLoaded—— 折叠状态可能在 DOM 构建前就已变化 - 回调里别直接操作大量 DOM，用
requestAnimationFrame批量更新类名 - 必须用
visualViewport.width，不是window.innerWidth：前者反映当前渲染视口真实尺寸，后者在动画中跳变剧烈 - 加
debounce(300ms)，避免铰链缓动过程中反复触发
最易被忽略的一点：所有 position: absolute 或 fixed 元素必须限制 inset 或 max-width，否则会在双屏展开时溢出单侧视口——这不是布局错，是物理分割导致的渲染边界截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
