办理 iOS Safari 中 100vh 引发的滚动条题目

1. 因由

当我使用vue3开发一个全屏页面时，我选择了CSS的height: 100vh来确保页面能够撑满整个视口。在浏览器的手机模拟器上进行测试时，一切看起来都很正常。
然而，当我在手机Safari浏览器上打开页面时，却意外地发现了滚动条的出现，这令我感到惊讶。为了确认题目的根源，我又实验在Chrome浏览器中打开页面，但结果却是相同的：滚动条依然存在。
这个突发情况引发了我的好奇心，尤其是因为我是在Vue3框架下进行开发。早先，我以为这只是简朴的浏览器兼容性题目，然而，当我深入研究后，却发现了题目的根源，这一发现彻底刷新了我的认知。接下来，让我与你分享我对这个题目的探索和办理方案。
2. 缘故因由

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

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

3. 办理方案

为了办理这个题目，我们可以接纳以下几种办理方案：
3.1 使用 -webkit-fill-available

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

1. .container{
2.         height: -webkit-fill-available;
3. }

复制代码

-webkit-fill-available 是一个 Webkit 前缀的 CSS 属性值，用于设置元素的尺寸，以填充其包含块的可用空间。
这个属性通常用于指定元素的高度或宽度，以便它填充其父元素的可用空间，而不会超出或溢出。在移动装备上，特殊是在Safari 中，遇到100vh 的题目时，使用-webkit-fill-available 时一个办理方案，因为它会填充整个可用空间，包罗底部工具栏的高度。
注意：height: -webkit-fill-available; 是一种特殊的设置，它告诉浏览器将元素的高度设置为其包含块的可用空间的高度。因此，如果你设置了这个值，其他对高度的设置大概会被覆盖或不生效，因为浏览器会优先思量 -webkit-fill-available 的设置。

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

复制代码

3.2 动态计算视口高度

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

1. <template>
2.   <div class="container" :style="{ height: viewportHeight }">
3.     viewport height: {{ viewportHeight }}
4.   </div>
5. </template>
7. <script setup lang='ts'>
8. const viewportHeight = window.innerHeight + 'px';
9. </script>

复制代码

结果如图所示：

3.3 使用dvh

• dvh (Dynamic Viewport Height):
  dvh 是一种动态视口高度单位，它的值会随着页面的缩放而变革。它的提出主要是为了办理在移动装备上使用 100vh 时大概出现的题目，如 Safari 中底部工具栏的高度未被思量的情况。
  

1. .container{
2.         height: 100dvh;
3. }

复制代码

注意： 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
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。