共计 963 个字符，预计需要花费 3 分钟才能阅读完成。
iphoneX 以及以上全面屏手机，下面有个刘海，上面有一条黑线，所以会呈现两种状况：
- 页面全笼罩
viewport-fit=cover，刘海和黑线挡住了局部页面 - 页面自适应
viewport-fit:contain，页面上下左右默认会有个缩进，这样页面尽管全副显示，然而缩进的区域的背景色与页面不搭
传统做法
获取设施信息，而后用设施信息一个一个去匹配，当匹配到相应的设施时, 给 body 或者底部元素加个 padding-bottom 之类
毛病：要匹配大量型号，且随着手机的更新要一直的保护，而且须要 JS 去管制款式
非传统做法
IOS11 之后新增两个 css 函数 env() 和constant(), 两个函数的性能就相当于 css 中的 var() 函数
// 申明一个变量 --colour-primary 并应用
:root {--colour-primary: #bae;}
button {background-color: var(--colour-primary);
}而 env() 和constant()承受两个参数, 第一个就是 环境变量 , 第二个是找不到环境变量时的 默认值
目前，惟一存在的环境变量是safe-area-inset，细分为safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottom、
外围：必须将 viewport-fit 设置为 cover, 小程序默认是 cover
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">理论应用
// 兼容写法
.bottom-distance {
padding-bottom: 12px;
padding-bottom: constant(safe-area-inset-bottom, 12px);
padding-bottom: env(safe-area-inset-bottom, 12px);
}也能够用calc
.bottom-distance {padding-bottom: calc(10px + env(safe-area-inset-bottom, 12px));
}结尾
至于 constant 和env啥区别，我也不晓得~~
正文完