折叠屏重排应避免resize事件，改用matchmedia监听screen-spanning媒体查询；需兼容降级方案并防止layout thrashing，铰链避让依赖原生api或服务端配合。
折叠屏不能靠 resize 事件触发重排
resize 事件在铰链展开/闭合过程中高频触发、抖动严重，且无法区分“真折叠态”和“动画中间态”。DOM 重排若绑在 resize 上，轻则卡顿，重则样式错乱或状态丢失。
真正可靠的信号来自 window.matchMedia 监听 (screen-spanning: single-fold-horizontal) 这类媒体查询状态切换——它只在折叠状态发生**语义性变化**时触发一次（比如从单屏→双屏），不是像素级变动就响应。
- 必须在
DOMContentLoaded前或刚完成时立即注册监听，否则可能错过初始状态 - 回调里避免直接操作大量 DOM；用
requestAnimationFrame批量更新 class 或 style - 同一设备可能同时匹配多个查询（如
min-width: 1200px和screen-spanning: single-fold-horizontal），CSS 层叠顺序决定最终生效规则
screen-spanning 媒体特性兼容性与降级方案
screen-spanning 是 Chromium 119+（Android Chrome/Edge Beta）才支持的实验性特性，桌面端和旧版浏览器返回 not all。硬依赖它会导致折叠屏用户看到默认单面板布局，甚至白屏。
降级逻辑必须用 JS 主动判断：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 先查
matchMedia('(screen-spanning: single-fold-horizontal)').media是否为有效字符串，否则 fallback 到window.innerWidth+window.innerHeight组合判断（例如宽高比接近 2.2:1 且宽度 > 1800px 可疑为 Z Fold 展开态） - 结合
DeviceInfo.Idiom === 'Foldable'（仅限 .NET MAUI 等跨平台框架）或navigator.userAgent中的SAMSUNG+SM-F字符串做辅助识别 - 所有降级路径最终都应触发统一的重排入口函数，避免逻辑散落
折叠态 DOM 重排时避免 layout thrashing
折叠屏重排常伴随 Grid 列数切换、侧边栏显隐、导航结构重组等操作。若在单次 JS 执行中反复读写 offsetWidth、getComputedStyle 等触发强制同步布局，会引发 layout thrashing，尤其在低端 Android 设备上明显卡顿。
安全做法是把读和写分离：
- 先批量读取所有需要的尺寸/状态（如
nav.offsetWidth,document.body.classList.contains('folded')） - 再一次性修改 class 或 style，让浏览器合并重排
- 对动态插入的节点（如双面板模式下新增的右区容器），用
document.createDocumentFragment()预组装，最后 append 一次
铰链区域避让需服务端配合
CSS 无法直接感知铰链物理位置，screen-spanning 只告诉“是否跨屏”，不提供铰链坐标。若需避开铰链区域（比如按钮不放在中间 100px），必须依赖原生能力：
- Android 平台：通过
HingeAngleSensor获取角度，再传给 WebView 注入 JS 变量（如window.hingeAngle = 175） - Samsung One UI：调用
samsung-webapis的device.getFoldState()，返回folded/unfolded/half-folded - 纯 Web 场景无原生接入时，只能按设备型号硬编码避让值（如 Galaxy Z Fold4 展开态铰链约在 x=880px 处），但此法维护成本高且易失效
铰链避让不是纯前端能闭环的事，容易被忽略的是：服务端需识别 User-Agent 中的折叠屏标识，并提前下发对应设备的铰链元数据，否则 JS 拿不到可靠坐标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
