Galaxy Z Fold系列折叠屏需用screen-spanning+matchMedia识别铰链物理状态，因min-width媒体查询在折叠/展开及横竖屏切换时window.innerWidth频繁跳变（720–1840px），易与iPad等平板混淆，导致布局错乱。
折叠屏不能靠 min-width 媒体查询硬切断点，必须用 screen-spanning + window.matchMedia 组合识别铰链物理状态，否则 Galaxy Z Fold 和 Pixel Fold 上的布局会频繁错乱。
为什么 @media (min-width: 840px) 在折叠屏上基本失效
同一台设备在折叠/展开、横竖屏切换时，window.innerWidth 可能反复落在 720–1840px 区间内，和 iPad、Surface Pro 等平板高度重叠。仅靠宽度判断，Z Fold 展开后可能被当成“大号手机”，Pixel Fold 外屏竖屏（约 270px）和内屏横屏（约 1840px）之间又存在巨大跳变，resize 事件还常被节流或延迟触发。
-
screen-spanning: single-fold-horizontal表示横屏展开（铰链在上下边），适用于 Z Fold 展开态、Pixel Fold 横置态 -
screen-spanning: single-fold-vertical表示竖屏展开（铰链在左右边），常见于 Flip 系列或 Pixel Fold 合盖后竖屏使用 - 桌面浏览器或 Chrome not all，CSS 中必须写 fallback，默认单栏布局
window.matchMedia 监听比 resize 更可靠
resize 在折叠动画中高频抖动（Pixel Fold 上常只触发 1 次或漏掉关键帧），而 window.matchMedia 只在铰链状态真正切换时触发一次，且能立即响应——注册必须在 <script></script> 标签内直接执行，不能等 DOMContentLoaded。
- 监听代码要放在
内或顶部的 inline script 中 - 回调里别直接操作大量 DOM；用
requestAnimationFrame批量更新 class 或样式 - 务必检查
e.matches，不要假设匹配结果恒定；折叠动画中可能短暂为false
viewport 标签不加 viewport-fit=cover 就等于没适配
缺少 viewport-fit=cover 会导致内容被系统 UI（折痕区、刘海、底部导航栏）裁切，或在展开后自动缩放成小字。这不是样式问题，是渲染层就错了。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 禁用
maximum-scale=1.0或user-scalable=no：折叠屏用户需要双指缩放查看细节，禁用即违反可访问性 - iOS Safari 在折叠动画中可能触发两次重排，
initial-scale=1.0是唯一稳定锚点 - 安卓 WebView 128+ 和 iOS Safari 16.4+ 才完整支持
viewport-fit，旧版本需用@supports (display: flex)包裹降级样式
Pixel Fold 必须叠加 display-mode: browser 和 dynamic-range: high
仅靠 CSS 媒体查询或 JS 尺寸判断，在 Pixel Fold 上几乎必然失败：外屏竖屏约 270px，内屏横屏约 1840px，但折叠动画中 document.visibilityState 可能短暂为 prerender，screen.width 也可能滞留旧值。
- manifest.json 中必须设置
"display_override": ["window-controls-overlay", "minimal-ui"]，并确保"display": "browser" - CSS 中需同时满足：
display-mode: browser、dynamic-range: high、min-width（如1200px）三者共存，HDR 渲染才稳定启用 - 别用
transform: scale()模拟适配——它破坏点击热区、滚动行为和字体亚像素渲染
铰链状态不是“宽高比”或“orientation”能准确描述的物理事实，所有基于尺寸猜测的逻辑都会在真机上暴露缺陷；screen-spanning 是目前唯一能反映真实折叠意图的信号，但它的实验性意味着你必须为不支持环境准备 JS 回退路径，而不是把它当普通媒体查询用。
