css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白 设置安全区域与边界的距离

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

    safe-area-inset-left：安全区域距离左边边界距离

    safe-area-inset-right：安全区域距离右边边界距离

    safe-area-inset-top：安全区域距离顶部边界距离

    safe-area-inset-bottom：安全区域距离底部边界距离

安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图1蓝色区域 图2绿色区域 

图1

 

图2

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover 可以直接使用 H5设置如下

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

使用方法：

body {

    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

之所以写了constant和env两种 是因为ios11.2版本以后constant废弃，env生效  写2种是兼容所有ios版本 官方自从11.2后废弃constant说明截图如下：

官方在11.2版本之后 还增加了max() min() 去解决兼容横纵向切换时出现的问题 设置safe-area-inset-left左边距距离横向正常 恢复为纵向时，env(safe-area-inset-left)被解析为0px 左侧内容会紧贴屏幕 所以使用如下方式 做兼容

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

附官方相关详情文档链接：Designing Websites for iPhone X