折叠屏适配需严控viewport、用screen-spanning识别铰链、env()避让铰链区、禁混用flex/grid，真机测试半折叠态。
折叠屏适配不是加几个 @media 就能解决的事——viewport 错、铰链没避、布局混用 Flex/Grid，真机一展开就错位卡死。
viewport meta 标签必须放对位置且参数零误差
所有折叠屏渲染异常的起点，90% 都出在这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。它必须出现在 最顶部，早于任何 <link> 或 <script></script>，否则 iOS Safari 会先按桌面宽度（980px）解析一次 DOM，再重排，造成闪屏、字体跳变、按钮点不中。
-
width=device-width不能写成device_width、width=deviceWidth或漏掉initial-scale=1.0，任一拼写错误都会让整个媒体查询链失效 - 禁用
maximum-scale=1或user-scalable=no：折叠屏用户常需双指缩放查看细节，禁用即违反 WCAG 可访问性要求 - 安卓 WebView 和 iOS Safari 16.4+ 才完整支持
viewport-fit=cover，若需撑满非矩形安全区域（如折痕+刘海），应加上该参数；旧版本需用@supports (display: flex)包裹降级样式
别用 min-width 硬切断点，改用 screen-spanning + matchMedia
仅靠 @media (min-width: 1024px) 无法区分 “iPad 横屏” 和 “Z Fold 展开”，两者宽度重叠，硬切会导致布局过密或浪费空间。Chromium 119+ 支持 screen-spanning 媒体特性，它是唯一能真实反映铰链状态的原生机制。
- 横屏折叠（铰链在上下边）匹配
@media (screen-spanning: single-fold-horizontal)，适用于 Z Fold 展开、Pixel Fold 横置 - 竖屏折叠（铰链在左右边）匹配
@media (screen-spanning: single-fold-vertical)，此时应回退到单栏布局 - 桌面浏览器或旧版 Chrome 中该查询返回
not all，必须配合 JS 回退逻辑，例如监听window.innerWidth与window.innerHeight比值（宽高比 > 2.0 且宽度 > 1200px 时大概率是竖向展开态） - 监听必须在
document.readyState === 'interactive'阶段注册，否则可能错过初始状态
铰链区域必须主动避让，不能靠猜尺寸或 position: fixed
铰链不是“可选避让区”，而是物理不可显示、不可交互的失效带。用 position: absolute 居中、grid-template-columns: 1fr 1fr 均分，都会让内容正卡在铰链缝里。CSS 媒体查询完全无法感知铰链坐标，必须用 Web API 获取真实边界。
- 优先使用
env(fold-left)/env(fold-right)设置安全边距：.main-content { margin-inline-start: env(fold-left, 0px); margin-inline-end: env(fold-right, 0px); } -
position: fixed在折叠屏上会彻底失灵——它锚定的是整个 viewport，而非某个 segment，常被渲染到铰链缝隙中或跨屏拖拽时卡死；改用position: sticky，并确保其父容器只属于一个 segment - 现代方案推荐
@container查询：main { container-type: inline-size; container-name: hinge-safe; }，再写@container hinge-safe (min-width: 720px) and (aspect-ratio >= 2/1)显式留出 2px 铰链间隙，中间列设pointer-events: none - 绝对不要用
screen.width+ 硬编码偏移（如calc(50vw - 24px)），双折/外折设备上必然失效
Flex 与 Grid 不可混用于同一父容器
折叠屏展开后视口宽度突变（如从 270px → 1440px），若父容器同时声明 display: flex 且子元素内嵌 display: grid，Android WebView（Chromium 30–60）和部分 Samsung Internet 版本会忽略 grid-gap 或错乱 flex-wrap 行为。这不是兼容性问题，而是布局语义冲突。
- 导航栏、横向卡片流等一维结构 → 统一用 Flex：
@media (min-width: 720px) { flex-direction: row; } - 仪表盘、表单页、多栏内容区等二维结构 → 统一用 Grid：
grid-template-columns: minmax(300px, 1fr) 2fr，避免硬写50%或600px - 绝对不要在同一个
<div> 上既写 <code>display: flex，又让某个子项用display: grid做主结构；哪怕只对一个子项生效，也必须抽离为独立<div class="grid-wrapper"> <li>真机测试必须覆盖半折叠状态（悬停态），此时 <code>window.innerWidth处于中间值（如 1200px 左右），document.visibilityState可能为prerender，仅靠 resize 事件会误判
铰链位置不是静态值，它随设备形态、折叠角度、系统分屏策略实时变化；所有基于固定像素或 UA 字符串的判断，在 Pixel Fold 或 Mate X 系列上都不可靠。真正有效的适配，始于 viewport 的严丝合缝，成于 media query 与 JS 监听的协同，落于对铰链物理限制的敬畏——写完代码，务必拿真机跑一遍半折叠动画过程。
