处理折叠屏展开视口应优先使用screen-spanning媒体特性，它通过系统上报是否横跨铰链精准识别双屏状态，Chrome 114+和Samsung Internet已支持，避免依赖min-width导致与平板/桌面端冲突。
处理折叠屏手机的展开视口，核心不是“猜宽度”，而是识别设备当前是否真正跨过铰链显示——screen-spanning 媒体特性是目前最直接、最可靠的 CSS 方式。
用 screen-spanning 精准匹配展开态
主流折叠设备（如 Galaxy Z Fold、Pixel Fold、Mate X 系列）在 Chrome 114+ 和 Samsung Internet 中支持 screen-spanning，它不依赖像素值，而是由系统上报当前窗口是否横跨折叠线：
-
@media (screen-spanning: dual-fold-vertical)：竖放时两屏上下堆叠（如 Pixel Fold 展开竖屏） -
@media (screen-spanning: single-fold-horizontal)：横放时两屏左右并列（如 Z Fold 展开横屏） - 未匹配该查询时，浏览器自动回退到单面板样式，无需 JS 强制切换
避免只靠 min-width 判断展开
展开态视口宽度可能达 1800px+，但仅写 @media (min-width: 1200px) 会和大平板、桌面端冲突。更稳妥的做法是组合语义化条件：
- 展开横屏：
@media (min-width: 1440px) and (aspect-ratio: 21/9) - 展开竖屏：
@media (min-height: 1800px) and (orientation: portrait) - 折叠态兜底：
@media (max-width: 420px)或@media (width
监听变化比 resize 更可靠
折叠动画期间，resize 事件常被节流或抖动，而 matchMedia 可捕获媒体查询状态的真实切换：
立即学习“前端免费学习笔记（深入）”；
- 初始化即查：
const mq = window.matchMedia('(screen-spanning: dual-fold-vertical)'); - 动态响应：
mq.addEventListener('change', () => { updateLayout(mq.matches); }); - 必须在
document.readyState === 'interactive'阶段执行，否则可能错过初始状态
viewport 设置是前提，不能省略
没有正确的 标签，所有媒体查询都可能失效：
- 必须写在
最顶部：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -
viewport-fit=cover确保内容撑满内屏区域，避开折痕与刘海裁切 - 禁用
maximum-scale或user-scalable=no，保留用户缩放权限
