100vh在ios safari中因视口动态变化而不重算，导致滚动条；推荐用position: fixed + top/bottom兜底，配合viewport-fit=cover和env()适配安全区，避免js动态计算。
height: 100vh 在 iPhone 上滚动条是怎么来的？
直接写 height: 100vh 是 H5 全屏最常见也最危险的写法。它在安卓大部分机型和浏览器模拟器里表现正常，但在 iOS Safari（包括微信内置 WebView）中，100vh 会被解析为「视口初始高度」，而 iOS 在地址栏收起/弹出、软键盘唤起、甚至页面滚动时会动态调整视口高度——100vh 却不会重算，导致内容区域超出实际可视范围，触发滚动条。
这不是 bug，是规范行为。Safari 的 vh 基于 layout viewport（含地址栏），而非 visual viewport（用户真正看到的区域）。
- 安卓 WebView 通常更接近 Chrome 行为，
100vh多数情况下能跟随 visual viewport 动态更新 - iOS Safari 从 15.4 起仍不支持
100dvh（dynamic viewport height），别指望它 - 微信 8.0.22+ 已支持
100dvh，但旧版本、企业微信、飞书等容器大概率不认 - 真机调试时，用
getComputedStyle(el).height查看计算值，常会发现它远大于屏幕物理高度
position: fixed + top/bottom 是最稳的兜底方案
当“高度不可知”时，放弃对 height 的硬性声明，改用定位锚定边界。这是目前跨平台兼容性最高、无需 JS、无渲染抖动的方案：
.full-screen { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
- 不依赖任何父级高度，也不受 viewport 高度波动影响
- 所有现代 Android 和 iOS 浏览器（含微信、QQ、钉钉 WebView）均 100% 支持
- 若需内容居中，内部用
display: flex; align-items: center; justify-content: center，不要用margin: auto（fixed 元素不适用） - 注意 z-index：如果页面有导航栏或弹层，
.full-screen需设足够高的z-index，避免被遮挡
需要留出安全区？viewport-fit=cover + env() 必须配对
如果你的全屏页有底部 tabbar、返回按钮或输入框，必须避开 iPhone 底部 Home Indicator 或 Android 手势条——只靠 position: fixed 不够，还得适配安全区。
关键三件套缺一不可：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 必须完整写在最前面，漏掉viewport-fit=cover，后面全白搭 -
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tabbar { padding-bottom: env(safe-area-inset-bottom); } }——@supports检测必须写对，括号内是完整声明，不是函数名 - fallback 值写在
@supports外层：.tabbar { padding-bottom: 34px; }，iOS 直屏设备也能用，不会多出空白
别用 constant()：iOS 11.2 起已废弃；也别把 env() 写进 JS 的 style 对象里——JS 不解析 CSS 函数，只会当字符串透传。
为什么不用 JS 动态计算高度？
有人会想用 window.innerHeight 或 document.documentElement.clientHeight 来 setStyle。这在多数场景下反而更糟：
-
window.innerHeight在 iOS Safari 中受软键盘、地址栏收起影响剧烈，频繁触发 resize 事件，容易造成布局抖动 - 某些 Hybrid 容器（如部分企业微信 WebView）会伪造
innerHeight，返回错误值 - 首次渲染时 JS 还没执行，页面会先闪一下“未铺满”状态，用户体验差
- 横竖屏切换时，resize 事件可能延迟或丢失，导致高度错位
真正需要 JS 的，只有极少数场景：比如全屏视频播放器需监听 visualViewport 变化，或要兼容不支持 fixed 的极老安卓 WebView（2015 年前）。对绝大多数项目，CSS 方案更轻、更快、更可靠。
最容易被忽略的是：安全区数值是动态的——iPhone 14 Pro Max 的灵动岛在通话时会扩展高度，env(safe-area-inset-top) 会实时变化，但 CSS 重绘是自动的，JS 却拿不到事件。所以，优先信任浏览器原生机制，而不是自己造轮子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
