移动端H5横竖屏闪屏主因是浏览器重排/重绘，应监听resize而非orientationchange，配合防抖、CSS硬件加速（如transform: translateZ(0)）、避免读写交替及iOS滚动修复。
移动端 H5 页面横竖屏切换时出现闪屏（如白屏、内容重绘抖动、布局错乱），根本原因常是浏览器在 orientation change 过程中触发了页面重排或强制重绘，而 addEventListener 本身不直接“解决”闪屏，但配合正确的监听时机、防抖策略和 CSS 渲染控制，能显著抑制视觉异常。关键不在“加监听”，而在“何时监听 + 如何响应”。
监听 resize 而非 orientationchange
现代 iOS 和 Android 浏览器（尤其 Safari）对 orientationchange 事件支持不稳定，且该事件触发时机不可控，常滞后于实际视口变化，导致样式更新延迟、闪屏。更可靠的做法是监听 resize —— 它在视口尺寸真正变化后立即触发，与渲染流程更同步。
- 用
window.addEventListener('resize', handler)替代'orientationchange' - 注意：部分安卓 WebView 可能 resize 触发过早（如动画未结束），需结合
setTimeout微延时（16ms 内）确保 DOM 和样式已就绪 - 示例：
<script>
const handleResize = () => {
// 防抖：避免连续 resize 触发多次
clearTimeout(window.__resizeTimer);
window.__resizeTimer = setTimeout(() => {
const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
// 根据宽高比判断横/竖屏，更新 class 或 CSS 变量
document.body.className = width > height ? 'landscape' : 'portrait';
}, 16);
};
window.addEventListener('resize', handleResize);
</script>
用 CSS 强制保持渲染层稳定
闪屏常源于浏览器在方向切换时销毁并重建图层（Layer），尤其是启用了 transform、opacity 等硬件加速属性的元素。可通过以下 CSS 主动维持合成层：
- 给
<body>或根容器添加will-change: transform;（慎用，仅临时启用） - 更稳妥：始终启用硬件加速，例如
transform: translateZ(0);或backface-visibility: hidden; - 禁止 viewport 缩放导致的重排：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">（根据业务决定是否禁用缩放）
避免 JS 强制重排（reflow）操作
在 resize 回调中读写交替（如先读 offsetWidth 再改 style.width）会触发同步重排，加剧闪屏。应遵循“读-读-读 → 写-写-写”原则：
- 批量读取所有需要的尺寸信息（
clientWidth、getComputedStyle等）放在回调开头 - 所有样式修改集中到后面，用
className切换或style.cssText批量赋值 - 优先使用 CSS 变量（
document.documentElement.style.setProperty('--screen-orient', 'landscape')）驱动样式，让渲染引擎自主优化
补充：iOS Safari 的特殊处理
iOS Safari 在横竖屏切换时可能重置 scrollTop 或触发 scroll 事件，造成页面跳动。可在监听 resize 前缓存滚动位置：
- 记录
let lastScrollTop = window.scrollY;在 resize 前 - resize 后若发现是横屏且原为竖屏，可选择性恢复（
window.scrollTo(0, lastScrollTop)），但需加setTimeout(..., 0)确保 DOM 更新完成 - 对
position: fixed元素，iOS 下建议改用position: absolute+ 手动监听scroll控制定位，规避渲染 bug
