css: iphone x 刘海屏处理

参考： https://webkit.org/blog/7929/designing-websites-for-iphone-x/

刘海屏上下默认是白色的，网页内容在中间，iphonex的刘海屏导致视觉效果不好，我们需要让刘海屏也铺满网页的背景色。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
加上这句即可：viewport-fit=cover。

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

或者是直接设置background-color也行。
但是刘海屏铺满了背景后，我们的内容页跑到刘海屏去了，导致一部分内容被刘海遮住了，我们需要把内容往下一点。
env在IOS 11.2中新增的，constant在IOS 11.2 已经被废弃，但是我们要做兼容，所以都要用上

.page{
    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);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

根据情况使用某几个。

/* body 在横屏底下和竖屏底下一定要做好定位，不然*/
    /* 竖屏底下的查询 */
    @media screen and (orientation: portrait) {
        body {
            /* 防止页面被刘海遮住 */
            padding-top: constant(safe-area-inset-top);
        }
    }
    /* 横屏底下的查询 */
    @media screen and (orientation: landscape) {
        body {
            /* IOS 11支持*/
            padding-right: constant(safe-area-inset-right);
            padding-left: constant(safe-area-inset-left);
            /*IOS 11.2版本版本支持*/
            padding-right: env(safe-area-inset-right);
            padding-left: env(safe-area-inset-left);
        }
    }

另外还需要考虑IOS10以及10以下的版本，比如iphone5/6，这些版本不支持constant和env计算样式，但是meta里面的viewport=fit却会影响页面，导致页面内容和statusbar（就是电量，信号，时间顶部那一栏）重叠，所以你需要针对这些版本设置一个padding-top:20px的固定值，那么你设置了一个这样的值又会影响安卓，安卓系统是不会受viewport=fit影响的，如果你给了一个这样的padding-top，不就影响了安卓吗？

我是这样做的，用js做一个判断，如果是iPhone OS就加一个padding-top:20px；然后padding-top: env(safe-area-inset-top);padding-top: constant(safe-area-inset-top);则写在css权限更高的样式里面，比如#app .mobile-app{...}里面，这样层级高的就会覆盖层级低的，如果系统不能识别env/constant，那么页就没办法覆盖，pading-top依然有效。