env() 是 ios11新增特性，webkit的css函数，用于设定安全区域与边界的距离。
第一点 添加新的视口元值
为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量。
<meta name="viewport" content="... viewport-fit=cover">
第二点 语法使用
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
safe-area-inset-* 由四个定义了视口边缘内矩形的top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不是有非矩形的显示切断的风险。
对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。
对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
第三点 案例
iPhone11下面的引导横条挡住了网页的内容，那我们可以设置一下安全区域距离底部边界的距离，就可以防止底部横条挡住。解决移动端 小程序或者h5底部栏 iphonex等一些手机安全区域底部横条屏幕的适配问题。
.container {
padding-bottom: env(safe-area-inset-bottom);
}
代码为:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="viewport-fit=cover">
<title>css env函数</title>
</head>
<div class="container">
<div class="big-block"></div>
<div class="big-block"></div>
<div class="big-block"></div>
<div class="big-block"></div>
</div>
<style>
body, html {
margin: 0;
padding: 0;
}
.container {
padding-bottom: env(safe-area-inset-bottom);
}
.big-block {
background-color: #1C9363;
height: 480px;
margin: 10px 0;
}
</style>
