css解决网页在iphoneX机型的头部刘海显示问题

一、解决iphonX白条,网站扩展到整个屏幕

网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法

方法一：设置body的背景色：

.body{
     background-color：#f00;
}

方法二：添加mate属性viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

说明：viewport-fit有三个值：

contain：视口完全包括网页内容，这意味着fixed定位的元素被包含在了iOS 11的安全区内
cover：网页内容完全覆盖视口，这意味着fixed定位的元素将被固定到视口，即它们也可能会被覆盖，这恢复了我们在ios 10上的行为
auto：默认值，和contain相同

方法三：设置safe-srea-inset-*确保安全边界

改属性值适用于：margin、padding ，以及绝对定位的 top 或 left。以padding为例：

body{
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}

参考：https://www.cnblogs.com/ypppt/p/12942122.html