应使用@media (horizontal-viewport-segments: 2)判断Z Fold展开态，因其能稳定识别双视口物理分割，而min-width等基于宽度的方案在折叠动画中会因尺寸跳变导致UI抖动；需注意语法严格、浏览器兼容性及配套降级策略。
直接用 @media (horizontal-viewport-segments: 2) 判断 Z Fold 展开态，别碰 @media (min-width: 720px)——后者在折叠动画中会反复跳变，导致布局抖动甚至错位。
为什么 @media (min-width: 720px) 在 Z Fold 上完全失效
它根本分不清“Z Fold 外屏竖屏（约 4.6 英寸）”和“内屏半开态（约 375px 宽）”，更识别不了铰链物理分割。所有基于 window.innerWidth 或 screen.width 的宽度判断，在折叠动画中剧烈跳变，样式反复切换，UI 抖动。Chrome/Edge 119+ 已废弃 screen-spanning，Safari/Firefox 至今不支持，硬写只会让旧浏览器直接忽略整个媒体查询块。
怎么写 @media (horizontal-viewport-segments: 2) 才生效
这是目前唯一能稳定识别 Z Fold 展开态（左右双视口）的标准方案，但极易因语法或环境问题失效：
- 必须写成
@media (horizontal-viewport-segments: 2)，不能是>1、=2或带单位 - 不能嵌套在其他查询里，比如
@media (min-width: 720px) and (horizontal-viewport-segments: 2)会被部分浏览器丢弃 - 仅 Chrome 110+、Edge 110+、Safari 16.4+ 支持；旧版本会静默跳过，所以必须配降级样式（例如默认单栏，只在匹配时激活双栏）
- 匹配时
document.body.clientWidth返回的是单侧宽度（约 375–420px），不是总宽——别用它算总布局
JS 监听 matchMedia 必须防抖且读 visualViewport.width
resize 事件在折叠动画中严重节流，Pixel Fold 上常只触发 1 次；而 matchMedia 能捕获状态切换关键帧，但不加处理会导致 UI 疯狂重排：
立即学习“前端免费学习笔记（深入）”；
- 监听必须在脚本加载时立即执行，不能等
DOMContentLoaded——折叠状态可能在 DOM 构建前就已变化 - 回调里别直接操作大量 DOM，用
requestAnimationFrame批量更新类名或样式 - 读取宽度要用
visualViewport.width而非window.innerWidth，后者在动画中不稳定，前者反映当前渲染视口真实尺寸 - 务必加 debounce（建议 300ms），否则铰链缓
真正难的不是写对媒体查询，而是降级逻辑是否覆盖了所有未匹配场景——比如 Safari 16.3 下 horizontal-viewport-segments 不支持，但用户已经展开设备，此时若没 fallback，双栏布局就彻底消失。
