移动端安全区域适配

安全区域：指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。

适配思路：获取到安全区域距离边界的距离，然后使用边距或div把它撑开（下面我们使用padding）。

1.修改布局方式

将viewport-fit设置为cover（网页内容完全覆盖可视窗口，只有设置为cover后env()才会生效），默认值为contain(可视窗口完全包含网页内容)

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" name="viewport" />

2.获取安全区域距离边界的距离

constant()和env()是IOS11新增的css函数，可以传入四个预定的变量，这四个变量分别对应上下左右安全区域距离边界的距离：

safe-area-inset-top    // 上
safe-area-inset-bottom // 下 
safe-area-inset-left   // 左
safe-area-inset-right  // 右

3.使用

比如我们要给boby设置下边距

body{
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

因为constant在ios11.2之后不支持，所以为了前后兼容，constant和env都需要，并且顺序不能改变。

总结

其实主要就是了解什么是安全区域，如何去获取安全区域和边界的距离，然后去解决这个问题的方式多种多样。