@media (min-width: 720px)在z fold上失效，因其无法区分外屏竖屏、内屏半开态及铰链物理分割；真正可靠的是@media (horizontal-viewport-segments: 2)，需精确书写、不嵌套、配降级样式，并配合@supports和visualviewport.width校验。
为什么@media (min-width: 720px)在Z Fold上完全失效
它根本分不清“Z Fold外屏竖屏（约4.6英寸）”和“Z Fold内屏半开态（约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），不是总宽——别用它算总布局
vertical-viewport-segments: 2适用于哪些设备
这不是orientation: landscape的替代品，而是专为翻盖式设备设计的物理分割检测：
- Galaxy Z Flip系列、华为Pocket系列展开后，屏幕被铰链水平切分为上下两块，此时
@media (vertical-viewport-segments: 2)才匹配 - 值只能是整数
2，写1或3无效 - 常见误用是混用
screen-spanning: single-fold-vertical——该特性已在Chromium中废弃，真机上基本不触发 - 典型布局是顶部工具栏占
50vh、底部内容区占50vh，避免用height: 50%（父容器高度可能未定义）
JS监听matchMedia必须防抖且读visualViewport.width
resize事件在折叠动画中严重节流，Pixel Fold上常只触发1次；而matchMedia能捕获状态切换关键帧，但不加处理会导致UI疯狂重排：
- 监听必须在脚本加载时立即执行，不能等
DOMContentLoaded——折叠状态可能在DOM构建前就已变化 - 回调里别直接操作大量DOM，用
requestAnimationFrame批量更新类名或样式 - 读取宽度要用
visualViewport.width而非window.innerWidth，后者在动画中不稳定，前者反映当前渲染视口真实尺寸 - 务必加
debounce（建议300ms），否则铰链缓慢转动时会连续触发数十次change事件
horizontal-viewport-segments和vertical-viewport-segments是互斥的，一台设备同一时刻只会匹配其中一个；但开发者常同时写两个规则并覆盖同一元素，导致后声明的CSS变量（如--fold-state）覆盖前一个，最终布局错乱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
