核心解法是防抖+状态缓存+多场景覆盖：用setTimeout延迟100–150ms更新、缓存--vh值（差值＜±1.5px则跳过）、绑定focus/blur/resize/fullscreenchange事件，并优先采用ResizeObserver监听元素尺寸变化。

移动端视口高度动态计算容易抖动，核心原因是 resize 事件高频触发 + 地址栏显隐不触发 scroll 而触发 resize + 输入法弹出导致视口突变。单纯监听 resize 并立即更新 CSS 变量或 DOM 高度，会引发布局重排、绘制卡顿甚至视觉跳动。解决关键在于“防抖 + 状态缓存 + 多场景覆盖”。

用防抖 + 定时器控制更新节奏

浏览器在拖拽窗口、旋转屏幕、地址栏收放时，resize 会在毫秒级连续触发数十次。直接响应会导致样式反复重设：

• 使用 setTimeout 延迟执行，典型延迟 100–150ms，等变化稳定后再更新
• 每次新 resize 触发前，先 clearTimeout 上一次未执行的定时器，避免旧任务覆盖新状态
• 不推荐用 Lodash 的 debounce，纯 JS 定时器更轻量、无依赖

缓存有效视口值，避免无效重绘

不是每次 resize 都需要重设高度。例如 iOS Safari 地址栏收起后，window.innerHeight 可能只变化 1–2px，但强制更新会触发无意义的 layout：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 记录上一次成功应用的 --vh 值（如 lastVh = 640.2）
• 新计算值与上次差值小于 ±1.5px 时，跳过设置（阈值可按设备微调）
• 对 devicePixelRatio 同样做缓存，仅当变化 ≥ 0.02 才重绘 Canvas 或重设缩放

覆盖输入法与全屏等特殊场景

键盘弹出、视频全屏、支付页唤起系统 UI 都会压缩可用高度，但它们不走 resize 流程：

• 给所有 input、textarea 绑定 focus 和 blur，触发 setRealVh()
• 监听 fullscreenchange，全屏切换时重新获取 innerHeight 并更新自定义属性
• 安卓部分 WebView 中，resize 在键盘收起后有延迟，可加 setTimeout(..., 300) 补偿

优先用 ResizeObserver 替代 window.resize

如果适配目标是现代环境（iOS 15+ / Android Chrome 80+），ResizeObserver 比 window.resize 更精准：

• 它监听的是元素尺寸变化，而非整个窗口，适合监听根容器或视频 wrapper
• 不会因地址栏滚动而误触发，天然规避部分抖动源
• 配合 getBoundingClientRect().height 获取真实渲染高，比 innerHeight 更稳定

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！