微信小程序<解决iPhone底部安全区域问题>

微信小程序一般在手机端会存在底部安全区的问题，大部分悬浮按钮如果处理的过于底部，可能针对相关的iPhone手机用户不太友好，所以这里可以采用简单的css属性来解决这个问题

⚠constant和env不能调换位置

  padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

通过wx.getSystemInfo获取设备信息

wx.getSystemInfo文档

• screenHeight(红色框) 屏幕整体高度(相当于手机屏幕得整个尺寸)
• windowHeight(蓝色框) 可视窗口高
• safeArea.bottom 安全区域底部坐标，坐标，坐标！！

    wx.getSystemInfo({
      success(res) {
        //判断是否存在安全区域,屏幕高度>安全区域底部坐标
        if (res.screenHeight > res.safeArea.bottom) { ... }
      }
    })

对你有帮助：

微信小程序中安全区域计算和适配

了解iPhone的屏幕设计

获取小程序右上角胶囊位置信息