ios safari中100vh因地址栏收放导致fixed元素错位，应改用100svh；兼容旧版需结合env(safe-area-inset-bottom)或visualviewport api动态设置--vh变量。
fixed元素用100vh在iOS Safari里“掉出屏幕”怎么办
不是height没生效，是iOS Safari的地址栏收放会动态改变视口高度，100vh被锁定在初始加载时的值，后续滚动或地址栏隐藏后，100vh仍按旧高度计算，导致position: fixed容器底部悬空或截断。
实操建议：
- 别依赖
100vh做fixed全屏布局，尤其涉及底部操作栏、弹层、导航栏等需要贴底的场景 - 改用
100svh（small viewport height）——它始终响应当前可视区域高度变化，Safari 16.4+、Chrome 109+、Firefox 114+均支持 - 兼容老版本（如iOS 15及以下）需降级：用
env(safe-area-inset-bottom)配合calc()手动撑满，并预留安全区
env(safe-area-inset-bottom)到底该加在哪、怎么加
env(safe-area-inset-bottom)只在有物理凹槽/圆角/虚拟导航键的设备上返回非零值（比如iPhone X+底部黑条、安卓全面屏手势区），但它本身不自动适配布局，必须显式参与计算。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 直接写
padding-bottom: env(safe-area-inset-bottom)但父容器没设height: 100%，结果没效果 - 给
body加padding-bottom，但fixed子元素脱离文档流，不受影响 - 用
env()减去100vh，却忘了env()返回的是px值，不能直接和无单位的100vh运算
正确做法（以固定底部按钮为例）：
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
/* 防止内容被遮挡 */
height: calc(60px + env(safe-area-inset-bottom));
}100svh vs 100dvh：该选哪个
100svh（small viewport height）取浏览器窗口最小可用高度，适合大多数“贴顶贴底”的fixed场景；100dvh（dynamic viewport height）反映用户实际可见区域最大高度，但某些Android浏览器（如旧版Samsung Internet）对dvh支持不稳定，且在地址栏完全展开时可能比svh还小，造成意外裁剪。
使用建议：
- 优先用
100svh替代100vh，覆盖iOS Safari、Chrome、Firefox主流新版 - 如果页面需严格撑满“当前最大可视区”（比如全屏视频封面），再考虑
100dvh，并加@supports (height: 100dvh)条件判断 - 不要混用
svh和dvh在同一布局中，容易因设备差异导致错位
兼容iOS 15及更早版本的兜底方案
当目标用户仍有大量iOS 15-设备（Safari不支持svh和env()安全区），纯CSS无法可靠解决，必须引入轻量JS检测。
关键点：
- 不能用
window.innerHeight监听resize——它在地址栏收放时不会触发 - 要用
visualViewportAPI监听height变化：visualViewport.addEventListener('resize', () => { ... }) - 把实时高度存进CSS自定义属性：
document.documentElement.style.setProperty('--vh', `${visualViewport.height}px`)，然后在CSS中用height: var(--vh) - 记得在
DOMContentLoaded时初始化一次，避免首屏闪动
这个JS只需3~4行，比引入整个viewport polyfill轻得多，也比UA判断靠谱。
复杂点在于：不同机型的“地址栏高度变化量”不一致，有的缩20px，有的缩80px，visualViewport能真实捕获，而任何静态估算都会漏掉边缘情况。
