iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

当我们在进行手机屏幕适配的时候，为了保证页面的效果，需要注意到屏幕的“安全区域(Safe Area)”这一概念。

在 iPhone X 上，由于前置 TrueDepth 摄像头和 Face ID 的存在，屏幕上方和下方会有一定高度的“安全区域”。当我们在进行页面布局和设计时，必须要将页面元素放到“安全区域”内，否则可能会被遮挡或者出现不协调的情况。

针对 iPhone X 设备，我们需要在页面中设置适配 iPhone X 系列设备的代码，保证在不同设备上呈现出好的效果。以下是 iOS 设备的大概安全区域值（单位 pt, 需要转换为 px）：

• iPhone X: 44pt (147px) + 34pt (112px) = 88px
• iPhone Xs: 44pt (147px) + 34pt (112px) = 88px
• iPhone Xs Max: 44pt (147px) + 44pt (147px) = 88px
• iPhone XR: 44pt (147px) + 34pt (112px) = 88px

在微信小程序中，可以使用 “ wx-adapter ” 插件来进行自动适配。通过在 app.wxss 中引入插件，再在 index.wxss 中声明变量 $safe-area-inset-bottom，即可使用 $safe-area-inset-bottom 变量来代替安全区域的高度。如下所示：

/* app.wxss */
@import "wx-adapter/index.wxss";

/* index.wxss */
.container {
  /* 底部按钮距离底部安全区的距离 */
  margin-bottom: $safe-area-inset-bottom;
}

在 H5 页面中，可以使用 CSS 的 “env(safe-area-inset-bottom)” 属性来获取安全区域的高度，并将布局调整到安全区域内。示例代码如下所示：

.container {
  /* 底部按钮距离底部安全区的距离 */
  margin-bottom: env(safe-area-inset-bottom);
}

总之，对于 iPhone X 系列设备的底部小黑条在微信小程序和 H5 的屏幕适配，需要注意到安全区域的概念，并且通过合适的方式进行布局调整，以保证页面的效果，给用户更好的使用体验。