兼容iPhone X的“刘海”设计

1、在<body>或<html>元素中指定与页面的background-color一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。这种方法对于只有图文信息的简单页面已经足够。

但是对于一些有全屏导航或全屏自适应布局的页面，这样设置并不够。需要2、3方法。

2、第一个新特性是对现有viewport meta标签的扩展，称为viewport-fit，它提供对嵌入(insetting)行为的控制。在iOS 11中可以使用viewport-fit。

viewport-fit的默认值是auto，上面看到的的效果就默认的嵌入行为。为了使该行为失效，并导致页面显示到屏幕的大小，你可以设置viewport-fit:cover来覆盖。

3、设置安全区域（使用max(),当手机横屏竖屏时都能正常设置安全区域。这个特性在ios 11不能使用）

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }