应使用 css @media (screen-spanning) 和 env() 环境变量避让折叠屏铰链区域，而非 min-width 或 aspect-ratio；需配合 js 监听 change 事件并实测交互热区。
折叠屏铰链区域不可用，别用 min-width 或 aspect-ratio 判断
折叠屏的铰链区域（fold zone）物理上不可触控、不可渲染，且不同厂商实现差异大。直接用 min-width 或 aspect-ratio 推断是否处于折叠态是危险的——同一设备横竖屏切换时宽高互换，但折叠/非折叠态可能尺寸完全一致，导致布局错乱。
正确做法是依赖 CSS @media (screen-spanning) 媒体查询，它专为折叠屏设计：
-
screen-spanning: single-fold-horizontal表示横屏折叠（铰链在上下边），此时内容应避开中间 16–48px 区域 -
screen-spanning: single-fold-vertical表示竖屏折叠（铰链在左右边），需避让左右边缘 -
screen-spanning: not all是回退状态，表示不支持或未检测到折叠态，此时按单面板处理
注意：screen-spanning 在桌面 Chrome 和旧版浏览器中返回 not all，必须配合 JS 检测回退（例如读取 window.screen?.availWidth + 用户代理判断）。
CSS 中用 env() 安全避让铰链，而不是硬编码像素值
铰链宽度不是固定值：三星 Galaxy Z Fold 系列约 24px，华为 Mate X 系列约 16px，Pixel Fold 约 32px。硬写 margin-left: 24px 必然出错。
应使用 CSS 环境变量 env(fold-left)、env(fold-top) 等（Chrome 117+ / Edge 117+ 支持）：
-
padding-inline-start: env(fold-left, 0px)—— 左铰链右侧留白 -
padding-block-end: env(fold-bottom, 0px)—— 下铰链上方留白 -
clip-path: polygon(0 0, calc(100% - env(fold-right, 0px)) 0, calc(100% - env(fold-right, 0px)) 100%, 0 100%)—— 裁剪掉右铰链区域
所有 env() 变量在不支持时会回退到第二个参数（如 0px），无需 JS 干预，但需确保父容器未设置 overflow: hidden，否则裁剪可能被截断。
JS 检测折叠状态并监听变化，避免 DOM 渲染后才响应
仅靠 CSS 媒体查询无法捕获开合过程中的中间态（比如半展开），且无法触发复杂逻辑（如滚动位置保持、输入焦点迁移）。必须用 JS 监听 change 事件：
- 通过
window.matchMedia('(screen-spanning: single-fold-vertical)')获取初始状态 - 调用
mediaQuery.addEventListener('change', handler)实时响应折叠/展开 - 在 handler 中检查
mediaQuery.matches，并结合window.visualViewport?.width辅助判断实际可用宽度
常见错误：在 DOMContentLoaded 后才绑定监听，导致首次折叠切换漏掉；正确做法是在 document.head 就绪后立即注册，或用 requestIdleCallback 延迟但不丢帧。
铰链避让后内容重排，必须测试 touch-action 和 pointer-events
加了 padding 或 clip-path 后，元素视觉位置变了，但默认仍占据原始布局空间。若未调整交互区域，用户点击“看似可触”的区域可能实际命中铰链空白区，触发无响应或误操作。
- 对避让后的容器设
touch-action: pan-x pan-y，防止 iOS Safari 因布局抖动误触发双指缩放 - 关键按钮/输入框需额外加
pointer-events: auto（尤其当父级用了clip-path） - 用
getBoundingClientRect()在折叠态下实测点击热区坐标，验证是否与视觉对齐
最易忽略的是：铰链避让常伴随 flex/grid 的 gap 或 justify-content 调整，这些改动会间接影响子元素的 offsetLeft 和事件冒泡路径——必须在真机上连点三次以上验证连续操作稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
