100vh在移动端Safari/Chrome中抖动是因为工具栏显隐导致视口高度动态变化，而100vh是基于初始视口的静态值；应优先使用100dvh，兼容性不足时用节流resize或visualViewport API兜底。
为什么100vh在移动端 Safari/Chrome 里会抖动
因为浏览器工具栏（地址栏、底部导航栏）弹出或收起时，视口高度会动态变化，但100vh是基于初始视口计算的静态值，不会实时响应。页面元素（比如全屏轮播、固定定位遮罩）高度卡死在初始100vh，工具栏收起后实际可用空间变大，内容就“上移”，再弹出又“下压”——这就是抖动根源。
优先用dvh单位替代vh，但注意兼容性
dvh（dynamic viewport height）是 CSS 新标准单位，代表“当前可用视口高度”，浏览器工具栏变化时它会自动更新。不过目前仅 Chrome 105+、Safari 16.4+、Firefox 112+ 支持；iOS 16.4 之前版本 Safari 完全不识别dvh，会直接回退到100vh（仍抖动）。
稳妥写法是叠加声明：
section.fullscreen {
height: 100vh; /* fallback */
height: 100dvh; /* modern browsers */
}
注意：dvh不能用于@media查询条件（如@media (min-height: 100dvh)无效），也不能在 JS 的getComputedStyle中读取为数值（返回100dvh字符串而非像素值）。
用resize事件监听视口变化并重设高度
当dvh不可用时，靠 JS 监听window.resize是最常用兜底方案。但要注意：移动端 resize 触发非常频繁（尤其滚动时），直接在回调里调用document.documentElement.clientHeight并赋值会导致性能抖动甚至样式错乱。
- 必须加节流（throttle），建议 100–200ms 间隔
- 只更新需要动态适配的容器，避免全局重排；例如给
加data-dynamic-height属性，JS 只操作它 - 首次加载也要执行一次，否则冷启动时高度不准
示例代码：
function updateDynamicHeight() {
const el = document.querySelector('[data-dynamic-height]');
if (!el) return;
el.style.height = `${window.innerHeight}px`;
}
<p>// 首次执行
updateDynamicHeight();</p><p>// 节流 resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(updateDynamicHeight, 150);
});</p>
iOS Safari 特别坑：URL 栏隐藏后resize不触发
iOS Safari 在页面滚动后自动隐藏 URL 栏，但这个过程**不触发resize事件**，只改变window.innerHeight。所以光靠resize监听会漏掉这一关键变化。
解决方案只有两个：
- 监听
scroll事件 +setTimeout延迟检测innerHeight是否变化（推荐 250ms 延迟，避免高频判断） - 改用
visualViewportAPI（visualViewport.height），它在 iOS Safari 15+ 中能真实反映当前可视区域高度，且支持resize事件监听（注意：不是window.resize，而是visualViewport.addEventListener('resize', ...)）
后者更精准，但需检查支持：
if ('visualViewport' in window) {
visualViewport.addEventListener('resize', () => {
document.body.style.height = `${visualViewport.height}px`;
});
}
真正难处理的是 Android WebView 或旧版 UC 浏览器——它们既不支持dvh，也没有visualViewport，只能靠 scroll + timeout + innerHeight 对比硬扛。这类场景建议降级为固定高度或弹性布局，别强求“全屏”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
