摘自：如何解决移动端的安全区域为0的问题

在一些Android设备中，可以识别safe-area-inset-top属性，但又没有高度，这种问题该怎么解决呢？

从 iPhone X 开始出现了刘海和底部的黑条的区域，而 Android 系统通常也会模仿 iPhone 的一些设计，然后就是现在越来越多地新机型有了安全区域的概念。 若完全不考虑这些，可能就会出现类似这样的情况：

因此我们需要对这些区域做些特殊地处理。

1. 适配 iOS 中的安全区域

在大部分机型，尤其是 iOS 设备中，适配安全区域还是比较简单的，主要是 3 个步骤。

1.1 设置网页在可视窗口的布局方式

新增 viewport-fit 属性，使得页面内容完全覆盖整个窗口：

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

只有设置了 viewport-fit=cover，才能使用 env()。

1.2 限定安全区域

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

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

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度。 注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持 env() 的浏览器，浏览器将会忽略它。

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：