在 iPad Chrome 中，100vh 常因浏览器对视口高度的错误计算而超出实际屏幕，引发多余滚动条；Safari 正常但 Chrome 异常，根源在于 -webkit-fill-available 与 vh 的冲突及 iOS Chrome 对视口单位的兼容性缺陷。
在 ipad chrome 中，`100vh` 常因浏览器对视口高度的错误计算而超出实际屏幕，引发多余滚动条；safari 正常但 chrome 异常，根源在于 `-webkit-fill-available` 与 `vh` 的冲突及 ios chrome 对视口单位的兼容性缺陷。
iOS 版 Chrome（尤其是 iPadOS 16+）对 vh 单位的解析存在已知偏差：它会将地址栏、工具栏等 UI 元素的动态高度计入 100vh 计算，导致 body 或 html 实际渲染高度远超物理视口（有时接近 200vh），从而触发垂直滚动条——即使页面内容为空。
你当前的 CSS 中：
body {
height: 100vh;
min-height: -webkit-fill-available; /* ⚠️ 冲突根源 */
}
html {
height: 100vh;
height: -webkit-fill-available; /* ⚠️ 重复赋值且语义冲突 */
}
-webkit-fill-available 本意是“填满父容器可用空间”，但在 iOS Chrome 中，它与 100vh 混用会触发双重拉伸逻辑，尤其当 html 和 body 同时设置高度时，极易造成高度叠加。
✅ 推荐渐进式修复方案（按优先级排序）：
1. 移除所有 -webkit-fill-available，回归标准 100vh
这是最简洁可靠的解法，适用于绝大多数场景：
html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden; /* 可选：彻底禁用滚动（若无需滚动） */
}
2. 若需支持内容溢出滚动，改用 100% + 显式 html 高度链
确保高度继承链完整，避免 vh 动态计算缺陷：
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
/* 子元素即可安全使用 100% 高度 */
div {
height: 100%;
background-color: green;
}
3. 精准定位 Chrome（iOS）并隔离样式（高级场景）
利用 WebKit 特征媒体查询，仅对 iOS Chrome 生效，不影响 Safari 或其他浏览器：
/* 默认回退：Safari / 其他浏览器 */
html, body {
height: 100vh;
}
/* 仅 iOS Chrome 触发（基于 -webkit-min-device-pixel-ratio） */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (device-width: 768px),
screen and (-webkit-min-device-pixel-ratio: 0) and (device-width: 834px),
screen and (-webkit-min-device-pixel-ratio: 0) and (device-width: 1024px) {
html, body {
height: 100%;
}
}
⚠️ 注意事项：
- 不要同时为 html 和 body 设置 min-height: -webkit-fill-available —— 这是 iPad Chrome 高度失控的常见诱因；
- overflow: hidden 可临时验证是否为纯高度问题（移除后若滚动消失，则确认为 vh 计算异常）；
- iPadOS 17+ 中部分 Chrome 更新已改善该问题，但仍建议以 100% 链式方案为生产环境首选；
- 若使用框架（如 React/Vue），确保根容器（如 #root）也遵循相同高度策略，避免嵌套中断继承链。
通过以上任一方案，均可彻底消除 iPad Chrome 中由 100vh 引发的异常滚动，实现与 Safari 一致的精准视口适配。
