ios微信浏览器中100vh溢出是因wkwebview将地址栏高度计入视口，地址栏收起后可视区域变大但100vh值不变；必须用@supports包裹整个选择器块支持100dvh，且js需在domcontentloaded时立即执行setvh()并监听scroll/resize事件。
在 iOS 微信浏览器中，100vh 会溢出并触发滚动条，不是你样式写错了，而是微信 WebView（基于旧版 WKWebView）沿用了 iOS Safari 15.x 的视口逻辑：它把地址栏高度算进 100vh，但页面加载后地址栏收起，可视区域变大，而 100vh 值锁死不变——结果就是内容被顶出、底部留白、overflow: hidden 失效。
为什么 100dvh 必须用 @supports 包整块规则
微信内置浏览器（iOS 版）目前仍不支持 100dvh，直接写 min-height: 100dvh 会导致该声明被完全忽略，元素高度回退为 auto，页面视觉上“塌陷”。但错误写法如 min-height: 100vh; min-height: 100dvh; 同样危险：老环境仍走 100vh 分支，问题照旧；新环境也可能因解析顺序或构建工具干扰，没触发 dvh。
-
@supports (min-height: 100dvh)必须包裹整个选择器块，不能只包值 - 兜底的
min-height: 100vh要写在@supports外面，确保所有环境至少有基础高度 - 别用 PostCSS 插件自动转换单位——它们常把
100dvh错误降级成100vh
微信 WebView 中 JS 动态设 --vh 是唯一可靠兜底
iOS 微信浏览器不支持 dvh，也不响应 visualViewport 事件（该 API 在微信中被禁用），所以必须退回到手动监听 window.innerHeight。但要注意：微信中 resize 事件触发不稳定，尤其地址栏收起时只触发 scroll，且首次渲染必须在 DOM 加载完成前执行，否则读到的是带地址栏的错误初始值。
微信聊天分析助手 v2.1.0 — 完全本地运行的隐私保护工具。 分析聊天记录，推断 MBTI 与大五人格，检测情感趋势，生成可视化报告。 支持 jieba 精准分词、否定识别、反讽检测、风险预警。 内置 RAG 检索增强预测和多智能体博弈模拟，完全本地化、零数据外传。 可选 MiroFish 群体智能引擎增强对话预测。
- 在
DOMContentLoaded阶段立即执行一次setVh()，再绑定scroll和resize（二者都需） - 用
requestAnimationFrame包裹变量设置，避免连续触发导致重排抖动 - CSS 中按降级顺序写：
min-height: 100vh;→min-height: calc(100 * var(--vh, 1px));，不能颠倒 - 确保
html和body没有默认margin，否则window.innerHeight会偏小
绝对定位容器里 100vh 失效的典型场景
你在弹窗遮罩层或全屏按钮上写了 height: 100vh，但实际没撑满？微信 WebView 中，position: absolute 元素的 100vh 高度依赖包含块（containing block）有明确高度。如果父容器只是 position: relative 且未设高度，100vh 就会按 0 计算——这不是单位问题，是布局上下文缺失。
- 不要对绝对定位元素用
height: 100vh或height: 100dvh，改用top: 0; bottom: 0;，更稳定 - 若父容器本身靠
--vh驱动，JS 初始化必须在子元素渲染前完成，否则子元素读到的是初始1px - 检查是否误用了
-webkit-fill-available：它只对height有效，min-height不认；微信中甚至可能叠加导致高度翻倍
真正难处理的不是 100vh 本身，而是微信 WebView 对视口变化的静默——它既不暴露 visualViewport，又不保证 resize 触发时机。所以 JS 方案里，scroll 监听不能省，requestAnimationFrame 防抖不能少，DOMContentLoaded 初始化不能晚。漏掉任意一环，就可能在某个 iOS 微信版本里突然塌缩或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
