WordPress小程序开发之底部弧形安全区域(Safe Area)的高度适配

由于目前很多手机的屏幕边缘都是有弧度的比如iPhone，那么我们在微信小程序里底部固定一个购买按钮时就有可能会被弧度遮挡影响体验，那么如何适配这个弧度的安全距离呢？

苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
因为目标是需要对底部小黑条做适配，所以只需要关注safe-area-inset-bottom这个值。

而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。

CSS示例：

margin-bottom:calc(60px + constant(safe-area-inset-bottom));

margin-bottom:calc(60px + env(safe-area-inset-bottom))

/* 可以通过增加padding-bottom来适配 */
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

/* 可以通过margin-bottom来适配 */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

/* 或者改变高度*/
height: calc(55px + constant(safe-area-inset-bottom));
height: calc(55px + env(safe-area-inset-bottom));

当然，这只是针对iphone，所以我们需要判断下

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
.bottom-button {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom); 
}
}