折叠屏适配必须用screen-spanning媒体查询识别铰链状态、env()变量避让折痕区、window.matchmedia精准监听，而非仅调大min-width断点；viewport meta标签须严格正确，否则所有响应式逻辑失效。
折叠屏适配不是“加大断点值”就能解决的问题，screen-spanning 媒体查询 + env() 环境变量 + window.matchMedia 监听才是当前唯一可靠路径。硬套 @media (min-width: 1200px) 会把 Galaxy Z Fold 展开态和 iPad Pro 横屏当成同一类，布局必然错乱。
viewport meta 标签写错，折叠屏直接“失明”
所有问题的起点是 <meta name="viewport"> —— 它必须出现在 最顶部，且参数零误差：
-
width=device-width不能写成device_width或width=deviceWidth，否则后续所有媒体查询失效 - 必须包含
initial-scale=1.0，这是折叠动画过程中 Safari 唯一稳定的缩放锚点 - 禁用
maximum-scale=1和user-scalable=no：折叠屏用户常需双指放大查看铰链附近内容，禁用即违反 WCAG - 安卓/Edge 128+、iOS Safari 16.4+ 支持
viewport-fit=cover，可让内容真正撑满非矩形安全区（如折痕+刘海）；旧版本需用@supports (display: flex)包裹降级样式
用 screen-spanning 媒体查询识别铰链状态，别猜尺寸
@media (min-width: 840px) 无法区分 “Z Fold 展开” 和 “iPad 横屏”，因为两者宽度重叠。真正反映物理铰链的是 Chromium 119+ 的 screen-spanning：
-
@media (screen-spanning: single-fold-horizontal)：横屏折叠（铰链在上下边），适用于 Z Fold 展开、Pixel Fold 横置 -
@media (screen-spanning: single-fold-vertical)：竖屏折叠（铰链在左右边），如 Flip 合盖或 Mate X 展开 - 桌面浏览器或旧版 Chrome 中该查询返回
not all，CSS 必须有默认单面板回退样式，不能全依赖它 - 不要在 CSS 里写
grid-template-columns: 1fr 1fr均分——铰链会把中间列劈开，文字断行、按钮错位
用 env() 避让铰链区域，而不是硬编码像素值
铰链宽度不是固定值：Z Fold 约 24px，Mate X 约 16px，Pixel Fold 约 32px。硬写 margin-left: 24px 必然出错：
- 用
env(fold-left, 0px)设置左铰链右侧安全边距：margin-inline-start: env(fold-left, 0px) - 用
env(fold-top, 0px)处理横屏折叠的上下避让：padding-block-start: env(fold-top, 0px) - 用
clip-path裁剪掉铰链区域：clip-path: polygon(0 0, calc(100% - env(fold-right, 0px)) 0, calc(100% - env(fold-right, 0px)) 100%, 0 100%) - 所有
env()在不支持时自动回退到第二参数（如0px），但父容器不能设overflow: hidden，否则裁剪会被截断
window.matchMedia 监听比 resize 更精准，且必须提前注册
折叠动画持续约 300ms，resize 事件在此期间高频抖动（有时超 20 次），直接操作 DOM 会导致卡顿甚至样式错乱。而 window.matchMedia 只在铰链状态发生**语义性变化**时触发一次：
- 必须在
<script></script>标签内立即执行注册，不能等DOMContentLoaded，否则可能错过初始状态 - 正确写法：
const foldQuery = window.matchMedia('(screen-spanning: single-fold-horizontal)');然后监听change事件 - 回调中避免同步读写大量 DOM；用
requestAnimationFrame批量更新 class 或 style - 降级逻辑必须存在：当
foldQuery.media === 'not all'时，fallback 到window.innerWidth / window.innerHeight比值判断（如宽高比 > 2.0 且宽度 > 1200px，大概率是竖向展开态）
最易被忽略的一点：铰链避让不是纯 CSS 工作，env() 变量只在 Chromium 117+/Edge 117+ 生效，Safari 和 Firefox 当前完全不支持 screen.fold 和 screen-spanning，真机测试必须覆盖半折叠状态，且不能只信 DevTools 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
