关于 Safari 100vh 的问题与解决方案：一个前端开发者的亲身经历

作为一名前端开发者，我最近在开发一个响应式网站时遇到了一个令人头疼的问题——Safari 浏览器的 100vh 问题。这个问题不仅影响了用户体验，还让我花费了大量的时间去排查和解决。今天，我想和大家分享一下我的经历，以及我是如何最终找到解决方案的。

事情的起因是这样的：我在设计一个全屏背景的页面时，使用了 height: 100vh; 来确保页面的高度占满整个视口。这个方法在大多数浏览器中都工作得很好，但在 Safari 上却出现了问题。具体表现为：页面加载时，内容区域的高度会比实际视口高度短一截，导致底部内容被裁剪掉。更糟糕的是，当用户滚动页面时，页面会出现跳动现象，严重影响了用户体验。

为了找出问题的根源，我首先检查了代码，确认没有其他样式冲突或 JavaScript 干扰。接着，我尝试在不同的设备和浏览器上进行测试，发现这个问题只出现在 Safari 浏览器上，尤其是 iOS 设备上的 Safari。这让我意识到，问题可能与 Safari 的视口计算方式有关。

经过一番搜索，我发现了一个关键点：Safari 在处理 100vh 时，会将地址栏的高度也计算在内。这意味着，当用户滚动页面时，地址栏会自动隐藏，导致视口高度发生变化，从而引发页面跳动和内容被裁剪的问题。

找到了问题的原因后，我开始尝试各种解决方案。以下是我尝试过的几种方法：

• 1. 关闭手机或苹果设备的 Wi-Fi 再打开

虽然这种方法看起来与 100vh 问题无关，但有些网友建议这样做可以“刷新”浏览器的状态。我试了一下，结果并没有任何效果。显然，这个问题并不是由网络连接引起的。



• 2. 清除 Wi-Fi 记录

有些建议提到，清除设备上的 Wi-Fi 记录可能会解决问题。具体步骤是：进入设置 -> Wi-Fi -> 点击当前连接的无线路由 -> 选择“忽略此网络”，然后重新连接 Wi-Fi。不过，这种方法同样没有解决问题，且清除 Wi-Fi 记录并不推荐，因为它会删除所有保存的 Wi-Fi 连接记录。



• 3. 使用 calc() 函数

既然 100vh 会受到地址栏的影响，我决定尝试使用 calc() 函数来动态计算视口高度。具体做法是：height: calc(100vh - env(safe-area-inset-top));。这里的 env(safe-area-inset-top) 是一个 CSS 环境变量，用于获取安全区域的顶部内边距，即地址栏的高度。通过减去这个值，可以让页面高度更加准确。




经过测试，这种方法确实有效！页面不再出现跳动现象，内容也不会被裁剪。不过，这种方法只适用于现代浏览器，对于一些老旧版本的 Safari 可能不兼容。



• 4. 使用 JavaScript 动态调整高度

为了确保兼容性，我还尝试了使用 JavaScript 来动态调整页面高度。具体思路是：监听页面的滚动事件，当用户滚动时，实时计算视口高度并更新页面的高度。代码如下：




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




通过这种方式，我可以确保页面高度始终与视口高度保持一致，避免了地址栏变化带来的影响。这种方法虽然稍微复杂一些，但兼容性更好，适用于所有版本的 Safari。


四、最终解决方案


经过多次尝试，我最终选择了结合 calc() 和 JavaScript 的方案。具体来说，我使用 calc() 来处理现代浏览器，而对于老旧版本的 Safari，则通过 JavaScript 动态调整高度。这样既保证了兼容性，又解决了页面跳动和内容裁剪的问题。




此外，我还发现了一个有趣的现象：Safari 在处理 100vh 时，似乎对页面的滚动行为特别敏感。为了避免不必要的性能开销，我还在 JavaScript 中加入了一个防抖函数，确保页面在滚动时不会频繁触发高度调整。




function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}
window.addEventListener('scroll', debounce(adjustHeight, 200));


五、总结与反思


通过这次经历，我深刻体会到，前端开发不仅仅是写代码，还需要不断面对各种浏览器的兼容性问题。Safari 的 100vh 问题虽然让人头疼，但也让我学到了很多新的知识和技术。未来，我会更加关注不同浏览器的行为差异，提前做好兼容性测试，避免类似问题再次发生。




如果你也遇到了类似的 100vh 问题，不妨试试我提供的解决方案。希望这篇文章能帮助到更多的前端开发者，让我们一起打造更好的用户体验！