移动设备上的安全区域适配

CSS 代码解析

问题描述

当我们写个功能，容器的高度需要设置为 100vh，发现在 ios(safari)浏览器显示的时候，浏览器的底部工具栏总是会挡住底下的一部分，只有工具栏隐藏或者向上滚动的时候才能看到。

问题原因

没找到相关官方的问题，从知乎上搜到一个解释，觉得合理，就当是原因吧：在 Safari 上工作时，该团队努力只在必要时显示按钮栏。他们的目标是尽可能给网站更多的空间，这就是为什么按钮栏在滚动时隐藏。这导致了一个关于如何处理视口高度的艰难决定。它会

• 每次工具条隐藏和显示时更改高度。
• 使视口高度保持不变，并让按钮栏覆盖视口的一部分。

解决方法

body {
  min-height: 100vh, -webkit-fill-available;
  /* min-height: 100vh;
  min-height: -webkit-fill-available; */
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  /* 适配底部黑条*/
  /* padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); */
}

解释

• min-height: 100vh;: 这一行设置页面的最小高度为视窗高度的 100%。vh 表示视窗高度的百分比单位，100vh 即表示整个视窗高度。

• min-height: -webkit-fill-available;: 这是为了在 WebKit（例如，Safari 浏览器）中设置页面最小高度，使其填充可用的视窗高度。这在移动设备上确保了整个视窗高度的使用。

• padding-top: constant(safe-area-inset-top);: 这一行使用了 constant() 函数，它用于指定一个常量值。safe-area-inset-top 表示设备的安全区域在顶部的高度。这样设置的目的是在页面的顶部添加一个与安全区域高度相等的内边距，以确保页面内容不被遮挡在设备的刘海或状态栏等区域。

• padding-top: env(safe-area-inset-top);: 这一行使用了 env() 函数，该函数也用于指定一个环境变量值。同样，这里是为了在页面顶部添加一个与安全区域高度相等的内边距，确保适应设备的安全区域。

补充

我们需要将顶部和底部合理的摆放在安全区域内，iOS11 新增了两个 CSS 函数 env、constant，用于设定安全区域与边界的距离。

函数内部可以是四个常量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

注意：我们必须指定 viweport-fit 后才能使用这两个函数：

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

constant在iOS < 11.2的版本中生效，env在iOS >= 11.2的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内：

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}