记一次愚蠢的 issue: css env 和子标签的样式

去年 11 月份中旬，随着有赞 Vant Weapp 库 1.0 版本的正式发布，我们的小程序也是立即跟随官方的脚步，着手把依赖库升级了一下。但是却发现 Vant Weapp 对于苹果的底边适配却在微信开发者工具中消失了。在不了解 css env 实际作用和开发工具适配的情况…

接着就找到了我们自己的库中 Vant Weapp 的这个地方：

.van-safe-area--bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

发现了我们用的正是这个 env 变量。

可是这个 env 变量在微信开发者工具中竟然是不起作用的！

那么，事情原因就很清晰了。这是因为微信开发者工具在模拟器的环境中不提供该 env 变量。于是，我们在本地的开发环境中看不到这个元素的样式。

而按照苹果的定义，这个 env 变量是应该由系统提供默认值的，在苹果的真机上也确实是有这个样式的。

此时就懵了，那我们应该怎么办呢？

显然，我第一想到的是放弃使用这个变量，毕竟这个变量对于安卓和苹果的处理方案是不一样的。放弃的话，我们直接指定固定的底部填充值就行了。

可是，如果这样做的话，就会出现一个问题。这就是，当我们想在 iPhone X 系列手机上使用刘海屏的时候，那这个 34px 的固定值就不合适了。因为此时的底部填充应该是 44px。

所以，这个方法行不通。

于是，我只能尝试在微信开发者工具中，尝试给这个元素添加上样式。

.van-safe-area--bottom {
  padding-bottom: 34px !important;
}

结果，悲剧了。

该元素仍然是没有样式。

于是，这似乎又成了一个死胡同。

此时，我灵光一闪，想起了另一个 env 变量：

env(safe-area-inset-bottom-without-notch)

这个变量的意思是，不考虑刘海区域的底部填充值。

于是我尝试了下：

.van-safe-area--bottom {
  padding-bottom: env(safe-area-inset-bottom-without-notch);
}

Bingo！

问题解决了。

总结下来，我的愚蠢之处在于：

1. 误以为在微信开发者工具中也可以使用这个 env 变量。
2. 同时，又不知道这个 env 变量的实际作用，对于其与另一个类似的 env 变量的关系也不了解。
3. 没有仔细考虑兼容性问题，导致了适配方案的不合理。

事后回想起来，这的确是一次非常愚蠢的 issue，本来是一个很小的点，却浪费了我一个上午的时间。这也再次提醒我，在开发中一定要仔细考虑各个方面的因素，避免出现类似的低级错误。