解决 iOS Safari 中 100vh 引发的滚动条问题

目录

• 1. 起因
• 2. 原因
• • 2.1 视口高度计算方式
  • 3. 解决方案
  • • 3.1 使用 -webkit-fill-available
    • 3.2 动态计算视口高度
    • 3.3 使用dvh
    • 4. 相关参考

      1. 起因

      当我使用vue3开发一个全屏页面时，我选择了CSS的height: 100vh来确保页面能够撑满整个视口。在浏览器的手机模拟器上进行测试时，一切看起来都很正常。

      然而，当我在手机Safari浏览器上打开页面时，却意外地发现了滚动条的出现，这令我感到惊讶。为了确认问题的根源，我又尝试在Chrome浏览器中打开页面，但结果却是相同的：滚动条依然存在。

      这个突发情况引发了我的好奇心，尤其是因为我是在Vue3框架下进行开发。起初，我以为这只是简单的浏览器兼容性问题，然而，当我深入研究后，却发现了问题的根源，这一发现彻底刷新了我的认知。接下来，让我与你分享我对这个问题的探索和解决方案。

      2. 原因

      通过查阅相关资料和进行实验，我了解到不同浏览器在解释视口高度单位时可能存在一些微妙的差异。特别是在移动端浏览器中，由于各种浏览器界面元素的存在，浏览器在计算视口高度时可能会考虑到不同的因素，导致视口高度的实际值有所不同。

      2.1 视口高度计算方式

      首先，Safari在计算视口高度时，是包含了底部工具栏的高度的，这样一来，100vh的内容高度就会超出显示区域，从而出现滚动条。如图所示

      3. 解决方案

      为了解决这个问题，我们可以采用以下几种解决方案：

      3.1 使用 -webkit-fill-available

      在铺满视口的容器上设置以下css属性

      .container{height: -webkit-fill-available;}

      -webkit-fill-available 是一个 Webkit 前缀的 CSS 属性值，用于设置元素的尺寸，以填充其包含块的可用空间。

      这个属性通常用于指定元素的高度或宽度，以便它填充其父元素的可用空间，而不会超出或溢出。在移动设备上，特别是在Safari 中，遇到100vh 的问题时，使用-webkit-fill-available 时一个解决方案，因为它会填充整个可用空间，包括底部工具栏的高度。

      注意：height: -webkit-fill-available; 是一种特殊的设置，它告诉浏览器将元素的高度设置为其包含块的可用空间的高度。因此，如果你设置了这个值，其他对高度的设置可能会被覆盖或不生效，因为浏览器会优先考虑 -webkit-fill-available 的设置。

      .container{height: -webkit-fill-available;height：90vh; // 此高度将不会生效!!!}

      3.2 动态计算视口高度

      通过window.innerHeight 可以轻松得到视口的高度，再设置高度样式即可。

            viewport height: {{ viewportHeight }}  const viewportHeight = window.innerHeight + 'px';

      效果如图所示：

      3.3 使用dvh

      • dvh (Dynamic Viewport Height):

        dvh 是一种动态视口高度单位，它的值会随着页面的缩放而变化。它的提出主要是为了解决在移动设备上使用 100vh 时可能出现的问题，如 Safari 中底部工具栏的高度未被考虑的情况。

        .container{height: 100dvh;}

        注意： dvh并不是标准的 CSS 单位，而是一种可能用于描述视口高度的非官方单位。通常，这些单位是在处理移动设备上100vh 的问题时提出的替代方案。

        dvh 的兼容性如图所示：系统版本在iOS 15.4以下的不兼容，如果适配低版本iOS需要谨慎使用。

        4. 相关参考

        • MDN innerHeight 说明：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeight
        • dvh的兼容性查询（相关内容在网页最底部）：https://caniuse.com/?search=dvh