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

最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况,如下图。 1. 安全区域是什么意思? 想要解决内容与小黑线重叠的问题,我们需要先了解清楚苹果对于安全区域的定义。 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corn