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啥区别，我也不晓得~~