iphoneX的适配问题

iphoneX以及以上全面屏手机，上面有个刘海，下面有一条黑线，所以会出现两种情况：

1. 页面全覆盖viewport-fit=cover，刘海和黑线挡住了部分页面
2. 页面自适应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啥区别，我也不知道~~