应优先使用 screen-spanning 媒体特性识别折叠屏物理展开状态，如 (screen-spanning: single-fold-horizontal) 和 (screen-spanning: single-fold-vertical)，chrome 119+ 支持；不支持时需结合 width/height 组合断点降级处理。
针对折叠屏手机的展开状态调整布局，不能只看屏幕宽高数值，关键要识别设备是否真正处于“双屏展开”物理状态。用 @media (min-width: 1200px) 这类传统断点，在 Galaxy Z Fold 或 Pixel Fold 上极易误判——因为折叠态竖屏、展开态横屏、悬停态中间尺寸可能共享相近的 window.innerWidth，纯靠宽度匹配不可靠。
优先使用 screen-spanning 媒体特性
Chromium 119+（Chrome / Edge / Android WebView）支持原生识别铰链状态的实验性媒体特性：
-
@media (screen-spanning: single-fold-horizontal)：适用于横放展开的 Z Fold 类设备（铰链在上下边，两屏左右并列） -
@media (screen-spanning: single-fold-vertical)：适用于竖放展开的 Pixel Fold 类设备（铰链在左右边，两屏上下堆叠） - 未匹配时浏览器自动回退到默认单面板样式，无需额外 fallback CSS
- 注意：桌面版 Chrome 或旧 WebView 中该查询返回
not all，需 JS 降级处理
搭配 width + height 组合断点作可靠回退
当 screen-spanning 不可用时，用尺寸组合提高判断精度：
- 折叠态典型宽度：280–360px →
@media (width - 展开态稳定特征：宽度 ≥ 720px 且 高度 ≥ 840px →
@media (min-width: 720px) and (min-height: 840px) - 避免单独依赖
orientation: landscape，因 Z Fold 展开后仍可保持竖屏模式
避免常见陷阱
以下做法在真实折叠屏上容易失效：
- 监听
resize事件判断展开——折叠动画期间浏览器会节流，常只触发 1 次，无法捕捉中间态 - 用
window.orientation或orientationchange—— 已被主流浏览器废弃 - 依赖
devicePixelRatio或 UA 字符串中的 “Fold” 判断——返回的是设备能力，不是当前窗口状态 - 把 container queries 当作 viewport 替代方案——它响应容器尺寸变化，对系统级折叠无感知
JS 层需配合做帧级校验
CSS 媒体查询响应有延迟，建议在 JS 中补充实时校验：
- 页面加载初期（
document.readyState === 'interactive'）立即执行matchMedia查询 - 用
visualViewport.addEventListener('resize', ...)做防抖校验，仅用于修正视觉抖动，不作为主判断依据 - 悬停态（铰链角度约 70°–110°）应单独处理：此时
document.visibilityState === 'prerender'且window.innerWidth处于中间值（如 1100–1300px），推荐采用「左内容右操作」双栏结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
