关于env(safe-area-inset-bottom)的兼容问题

env(safe-area-inset-bottom)是用来适配IOS底部高度的。

项目中有个地方高度是css这么写的

height: calc(100vh - 144px);

后来需要适配IOS，于是改成这样：

height: calc(
    100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );

 发现没什么问题，以为就解决了。

后来项目上线后，客户那边有个nubia手机，这里就出问题了。一开始也是到处找原因，因为身边没人用这种型号的手机，所以很麻烦。不过好在找到原因了，就是这个适配IOS的不兼容，然后直接失效了。一般的安卓手机这里env(safe-area-inset-bottom)会处理为0px，但是那个手机直接失效了！很坑！！！

最后完美的写法是：

height: calc(100vh - 144px);
/* 兼容 苹果手机 */
height: calc(
    100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
);

 这样的写法最后在浏览器上的效果是：

 如果支持env(safe-area-inset-bottom)的，下面一个height样式会覆盖上面一个；如果不支持的，下面一个height样式不会生效，直接是上面一个生效。

这样就完美了！