在开发移动端网页时Safari浏览器如何解决100vh高度不包含工具栏的问题？

优先使用100dvh替代100vh，需包裹在@supports (height: 100dvh)内并兜底min-height: 100vh；不支持时采用JS动态方案，监听resize节流更新CSS变量--vh，仅作用于data-dynamic-height元素。

在Safari浏览器中开发移动端网页时，设置height: 100vh会导致底部被工具栏遮挡、滚动后内容悬空或底部大面积留白，这是因为100vh在iOS Safari中计算的是包含地址栏的初始布局视口高度，而非用户当前实际可见区域，且该值不随工具栏收起/展开动态变化。

优先使用100dvh替代100vh

第一步：在CSS中直接用100dvh替换100vh，例如将height: 100vh;改为height: 100dvh;。
第二步：必须包裹在@supports (height: 100dvh)规则内，否则iOS 15及更早版本、微信内置浏览器等环境会完全忽略该声明，导致容器高度塌陷为auto。
第三步：外部保留min-height: 100vh;作为兜底，确保不支持dvh的设备仍有基础高度保障。
注意：【不能把height: 100svh和height: 100dvh写在同一声明块里直接覆盖】——Safari会忽略整条规则，必须用@supports隔离。

兼容iOS 15及微信WebView的JS动态方案

方法一：监听resize事件并更新CSS变量
页面加载完成时立即执行一次window.innerHeight获取真实可视高度，再绑定resize事件；每次触发时重新计算--vh值并写入:root样式表。
方法二：节流更新避免卡顿
【resize在iOS上高频触发，不加节流会强制同步布局，引发明显卡顿】，建议用requestAnimationFrame或setTimeout(0)包裹更新逻辑。
方法三：精准作用于目标元素
只对添加了data-dynamic-height属性的容器应用动态高度，例如.sidebar[data-dynamic-height] { height: calc(var(--vh, 1px) * 100); }，避免全局重排。

错误方案辨析与规避

-webkit-fill-available不是解药：它在iOS Safari中对height属性支持不稳定，Chrome完全不识别，且和100vh一样冻结在初始值，无法响应工具栏显隐。
100svh不适合撑满屏幕：它代表工具栏完全展开时的最小高度，滚动后工具栏收起，100svh值不变，容器反而比当前可视区还小，造成底部留白。
直接减去固定像素（如calc(100vh - 75px)）不可靠：不同机型、系统版本、横竖屏下工具栏高度差异大，硬编码易失效。