css 背景图怎么设置自动填充满_前端实现 CSS 适配苹果、安卓刘海屏方案

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

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

安全区

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

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

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

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

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

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

内容填充整个屏幕

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