这两天去面试，被考察如何适配刘海屏、异性屏，回来总结了一套方案，以供大家参考。

为了演示方便，以下均已 iPhone X 横屏作为例子。

安全区

其实浏览器已经默认使用了一种方案，在大多数情况下都能处理好异形屏问题，它的实现是基于安全区（safe area）的概念。

浏览器在默认情况下，会给页面边缘留空，以适应刘海屏的情况。

上图中的橙色区域，就是浏览器留空的边界，而中间部分就是安全区。页面的元素布局、定位等，都是在安全区中进行。

安全区外的边界大小无法通过 css 控制，但可以通过设置 html 或 body 的 background-color 来控制它的颜色（默认白色）。

可以发现，由于安全区的存在，内容并不能占满整个屏幕。

这时候需要引入一个 meta 属性值 viewport-fit=cover

内容填充整个屏幕

通过设置视口（viewport）的 meta 属性，可以实现安全区填充满整个屏幕。

此时，虽然页面填充满整个屏幕，但是部分内容会被刘海遮挡。

所以，需要手工地调整内容区的边距。

在 React、Vue、Angular 这种单页应用中，都存在根元素 <app-root>，我们可以通过给根元素设置固定的 padding 以规避遮挡。

但是固定的 padding 不能应用于所有的异性屏，毕竟刘海尺寸不一。办法是通过结合上面提到的安全区 ——

注意观察上述代码，引入了 4 组变量，它们是预定义的环境变量，用于获取安全区模式下的边界。如 env(safe-area-inset-left)，用于获取在安全区模式中的左边界。

不过，这些变量可能存在兼容问题。通过前置 padding: 20px，使得在不兼容时应用固定的 padding，而兼容时候则覆盖这个固定值。

在设置后，我们实现了如下效果。

而 header 和 footer 由于被设置为 position: fixed，宽度基于视口，所以还存在被遮挡问题。同样，应用预定义的环境变量后可以解决这个问题。

结语

以上通过设置 HTML 的 meta 属性和 CSS 的预定义环境变量，精细化地控制页面边距，实现适配刘海屏的效果。

你的点赞和转发，是我创作的动力，希望能多多支持。