兼容iphone x/xs系列的底部安全区域：底部导航栏+底部悬浮窗

兼容iphone x/xs系列的底部安全区域：底部导航栏+底部悬浮窗

对于position: fixed的可交互组件，如果渲染在iPhone X的安全区域外，容易误触 Home Indicator，应当把可交互的部分都渲染到安全区域内。
建议对CSS进行兼容

1.图片示例（左：未兼容；右：兼容）

2.实现----两个css函数：env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

1. tabbar的css增加

   同时存在且有序

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

2. 悬浮窗
   由于悬浮窗是对于tab栏定位的，所以其底部距离使用函数calc()去动态计算

   bottom: calc(50px + constant(safe-area-inset-bottom));
   bottom: calc(50px + env(safe-area-inset-bottom));
   padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
   padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

兼容性—详细文献请参考