转屏白屏与闪烁源于视口突变导致渲染中断，需通过内联样式占位、dvh替代vh、禁用过渡、适配ArkWeb等手段接管渲染流程。
转屏瞬间的白屏与重排闪烁，本质是视口尺寸突变导致浏览器被迫中断当前渲染流水线、清空帧缓冲、重建布局和样式——这不是代码写错，而是移动端原生行为。关键不在“阻止”，而在“接管”和“缓冲”。
强制锁定视觉层，避免白底暴露
转屏时 layout 视口重置，若 body 或根容器背景未被及时覆盖，就会闪出默认白色。解决方式不是等 CSS 加载，而是提前“占位”：
- 在 <head> 内联 <style>，设置
html, body { background: #f0f0f0; margin: 0; }（选页面主色调最接近的纯色，禁用渐变/变量） - 所有全屏容器（如 .page、.app-root）必须声明
background-color，且值为 solid 颜色，不可 transparent 或 inherit - 若使用深色模式，不要靠 JS 动态加 class；把主题 class 直接写死在
<html class="dark">上，由构建时或服务端注入
用 dvh 替代 vh，规避地址栏抖动引发的重排
iOS 和部分安卓浏览器在横竖屏切换时会动态显示/隐藏地址栏，导致 100vh 值跳变，触发整页 relayout。此时固定高度元素（如底部导航、全屏弹窗）会突然上移或下坠：
- 将所有依赖视口高度的尺寸（如
height: 100vh）替换为height: 100dvh（dynamic viewport height） - 对不支持
dvh的旧内核（如 Android 4.x WebView），用 JS 回退：height: calc(100vh - env(safe-area-inset-bottom))，并监听resize和orientationchange事件实时更新 - 避免在
DOMContentLoaded后才计算高度；优先在document.documentElement上设置style="--vh: 100dvh"，CSS 中用height: var(--vh)
横屏过渡期间禁用布局重绘敏感操作
转屏瞬间触发两次 resize（竖→横→稳定），中间短暂窗口可能宽高比异常（如 width=100px, height=2000px），极易让 flex/grid 布局崩溃或图片拉伸变形：
- 给根容器添加
transition: none !important，在window.visualViewport?.width稳定后（延时 100ms）再恢复动画 - 暂停所有基于
window.innerHeight计算的滚动锚点、懒加载、视差滚动逻辑；改用visualViewport.height并监听其resize事件 - 对视频、Canvas、WebGL 容器，转屏前调用
canvas.width = canvas.clientWidth等手动重设尺寸，避免浏览器自动缩放导致像素错乱
针对鸿蒙 ArkWeb 的特殊处理
HarmonyOS 的 ArkWeb 在横竖屏切换时有独立生命周期，常出现白屏时间比 iOS/Android 更长，且 UA 变化不规律：
- 在页面初始化阶段立即检查 UA 是否含
ArkWeb或HarmonyOS，命中则提前加载轻量级骨架屏 SVG 作为<body>背景图 - 禁用所有
@media (orientation: landscape)的 CSS 切换，改用 JS 判断window.screen.orientation?.type，配合matchMedia监听，确保样式切换与系统事件同步 - 若页面嵌入原生 App，需确认宿主是否调用了
webview.setOrientationLock(true)；未锁定时，ArkWeb 可能延迟触发resize，建议主动轮询screen.width/screen.height差值超过阈值即视为转屏完成
