iOS Safari中100vh/100vw致元素超可视区域的原因及CSS适配方案

嘿，这俩问题本质上都是iOS Safari对视口单位的特殊处理导致的，我给你一步步捋明白：

问题1：height:100vh的div超出可视区域 #

原因 #

iOS Safari里的vh单位是基于设备的物理全屏高度（包含顶部状态栏、底部工具栏这些系统UI），而不是用户当前实际能看到的可视区域。更坑的是，当你滚动页面让工具栏收起/展开时，vh的值不会实时更新——它始终固定为初始加载时的全屏高度。这就导致：当工具栏展开时，可视区域高度变小，但你的div还是按全屏高度渲染，自然就超出了可视范围。

问题2：height:100vw的遮罩层超出工具栏，且与window.innerHeight不匹配 #

原因 #

首先得纠正一个概念：vw是视口宽度单位，和高度半毛钱关系都没有😂。你设置height:100vw，等于让元素高度等于当前视口的宽度——比如竖屏时屏幕宽度是390px，元素高度就是390px；横屏时屏幕宽度是628px，元素高度就变成628px。而window.innerHeight返回的是当前可视区域的高度（已经减去了工具栏、状态栏占据的空间），所以两者数值自然不匹配，元素高度超出可视区域也就在所难免了。

通用解决方案：匹配可视区域的正确姿势 #

方法1：使用动态视口单位（推荐，现代浏览器支持） #

CSS新增的dvh（Dynamic Viewport Height）专门解决这个问题，它会实时跟随当前可视区域的高度变化，不管工具栏是展开还是收起：

.your-element {
  height: 100dvh;
}

如果需要兼容更旧的浏览器，可以加上vh作为降级：

.your-element {
  height: 100vh;
  height: 100dvh;
}

方法2：JavaScript动态设置（兼容旧版iOS） #

如果你的项目需要支持不支持dvh的老版本iOS，可以通过监听视口变化事件，手动设置元素高度：

function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化设置
setViewportHeight();
// 监听窗口大小变化（包括工具栏收起/展开）
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

然后在CSS里使用这个自定义属性：

.your-element {
  height: calc(var(--vh, 1vh) * 100);
}

这样不管iOS Safari的工具栏怎么变，你的元素都能完美匹配当前可视区域的高度啦～

内容的提问来源于stack exchange，提问作者Ramon Balthazar