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