iOS Safari 中 window.innerHeight 不准因地址栏高度被误计入视口，应优先用 visualViewport.height 并监听 resize/scroll 事件实时更新，配合 CSS 变量与 calc() 回退，且操作需在渲染后执行。
为什么 window.innerHeight 在 iOS Safari 里不准
直接读 window.innerHeight 得到的值，在 iOS Safari 初始加载或地址栏伸缩过程中，经常比真实可视区小 60–80px。这不是 JS bug，而是浏览器把地址栏/工具栏高度算进了“视口”定义里，但又不实时同步更新。更糟的是，window.innerHeight 在 DOMContentLoaded 或 load 事件里取值，大概率卡在地址栏还没收起的中间态，导致后续布局错位。
优先用 visualViewport.height 替代 window.innerHeight
visualViewport 是现代移动端更可靠的 API，它只反映用户当前真正看到的区域，不受地址栏伸缩干扰（iOS 15.4+、Android Chrome 支持良好）。关键不是“读一次”，而是持续监听变化：
- 检查
'visualViewport' in window，存在就绑定visualViewport.addEventListener('resize', updateHeight) - 初始化时立即调用一次
updateHeight()，避免首屏白屏或留白 - 不要只监听
resize，visualViewport还会触发scroll（比如页面滚动时地址栏收起）
示例逻辑：
function updateHeight() {
document.documentElement.style.setProperty('--vh', `${visualViewport.height}px`);
}
if ('visualViewport' in window) {
visualViewport.addEventListener('resize', updateHeight);
updateHeight(); // 立即生效
}
兜底方案：orientationchange + setTimeout 延迟读取
旧版 iOS（visualViewport，必须用传统方式兜底。但不能只监听 resize——Safari 的 resize 在竖屏地址栏收起时根本不会触发。正确组合是：
- 监听
orientationchange（横竖屏切换必触发） - 监听
resize（部分 Android 和横屏场景有效） - 每次触发后用
setTimeout(() => { /* read innerHeight */ }, 100)，避开地址栏动画中间态 - 横屏时可直接用
window.innerHeight；竖屏时若偏差明显，可加 60px 补偿（需按机型微调）
CSS 中怎么安全使用这个动态高度
别写 height: 100vh，改用 CSS 变量 + calc() 回退机制：
- JS 设置
document.documentElement.style.setProperty('--vh', 'xxxpx') - CSS 写成
height: calc(var(--vh, 1vh) * 100)，其中1vh是降级兜底，防 JS 未执行 - 如果要撑满底部导航栏上方区域（比如内容区），且导航栏高占屏幕 8%，可算出
padding-bottom: calc(var(--vh, 1vh) * 8)，而不是用百分比单位（它按宽度算）
最易被忽略的一点：所有监听和赋值操作，必须在页面渲染完成之后再执行，否则可能被样式表覆盖。Vue 用户应放在 $nextTick 里，React 可用 useLayoutEffect，原生 JS 推荐 requestAnimationFrame 包一层。
