iOS Safari 中 window.innerHeight 不准是因为地址栏/工具栏伸缩会动态改变该值，导致全屏容器闪动；应优先用 visualViewport.height 并监听其 resize 事件，旧版 iOS 则需 orientationchange + 延迟测量兜底。
为什么 window.innerHeight 在 iOS Safari 里经常“不准”
因为 Safari 移动版会把地址栏、底部工具栏的展开/收起状态算进 window.innerHeight，页面滚动时这个值会动态变化。用户刚打开页面时地址栏显示，window.innerHeight 偏小；往下滚一截后地址栏隐藏，值突然变大——导致全屏容器闪动或留白。
用 visualViewport 替代 window.innerHeight 获取稳定视口高度
visualViewport 是更现代、更可靠的 API，它反映用户当前“真正看到”的区域，不受地址栏伸缩干扰（iOS 15.4+、Android Chrome 支持良好）。关键在于监听它的 resize 和 scroll 事件，而不是只读一次。
实操建议：
- 优先检查
visualViewport是否存在，存在则用visualViewport.height - 监听
visualViewport.addEventListener('resize', handler)，每次触发都更新容器高度 - 不要在
DOMContentLoaded里一次性赋值，要持续响应变化 - 示例：
if ('visualViewport' in window) { const updateHeight = () => { document.documentElement.style.setProperty('--vh', `${visualViewport.height}px`); }; visualViewport.addEventListener('resize', updateHeight); updateHeight(); // 初始化 }
兜底方案：iOS 旧版本必须用 orientationchange + 延迟测量
对于不支持 visualViewport 的老 iOS（如 iOS 12–14），只能靠经验性补偿。核心思路是：等地址栏稳定后再测，且区分横竖屏。
常见错误现象：window.innerHeight 在 load 或 DOMContentLoaded 时取值，结果比实际可视区小 60–80px。
实操建议：
- 监听
window.addEventListener('orientationchange', ...)和window.addEventListener('resize', ...) - 触发后用
setTimeout(..., 100)延迟读取，避开 Safari 地址栏动画中间态 - 横屏时直接用
window.innerHeight，竖屏时可加 60px 补偿（需按机型微调） - 避免用
document.documentElement.clientHeight，它在缩放或 zoom 下不可靠
CSS 里用 100vh 还是 var(--vh)？
100vh 在移动端等于初始 window.innerHeight，但不会随地址栏隐藏而更新，本质是静态快照。一旦地址栏收起，100vh 就比真实可视区小，容器无法撑满。
所以必须用 CSS 自定义属性动态注入：
- JS 中设置
document.documentElement.style.setProperty('--vh', 'xxxpx') - CSS 中写
height: calc(var(--vh, 100vh))，保留 fallback - 别用
min-height: 100vh做全屏，它解决不了“滚动后变矮”的问题 - 如果容器含
position: fixed，记得同时更新top/bottom值以对齐新视口边界
最麻烦的不是代码怎么写，而是不同 iOS 版本对 visualViewport 的实现差异——比如 iOS 15.0～15.3 有 resize 事件丢失问题，得加定时轮询兜底。这点很容易被忽略，直到用户反馈“偶尔不全屏”。
