在微信小程序中，判断手机屏幕底部是否有 ​​Home Indicator 横条​​（如 iPhone X 及以上机型的底部横条），可以通过以下方法实现：

方法 1：通过 wx.getSystemInfoSync() 获取安全区域​​

微信提供了 safeArea 对象，可以直接判断是否存在底部横条：

const systemInfo = wx.getSystemInfoSync();

// 判断是否有底部横条（安全区域底部小于屏幕高度）
const hasHomeIndicator = systemInfo.safeArea.bottom < systemInfo.screenHeight;

console.log('是否有底部横条：', hasHomeIndicator);

关键参数解释​​：

• safeArea.bottom：安全区域底部坐标（不含横条）
• screenHeight：屏幕实际高度（含横条）
• ​​逻辑​​：如果 safeArea.bottom < screenHeight，说明底部有横条占用空间。

方法 2：通过 wx.getSystemInfo() 异步获取​

异步版本（推荐用于复杂场景）：

wx.getSystemInfo({
  success(res) {
    const hasHomeIndicator = res.safeArea.bottom < res.screenHeight;
    console.log('异步获取是否有横条：', hasHomeIndicator);
  }
});

方法 3：适配样式（CSS 解决方案）​

如果只是为了布局适配，可以直接使用 env(safe-area-inset-bottom)：

/* 在 wxss 中 */
.container {
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

env(safe-area-inset-bottom) 会自动获取底部安全距离（横条高度）。

兼容性注意事项​​

1. ​​iOS 设备​​：

   iPhone X 及以上机型（全面屏）会有横条。
   safeArea 在 iOS 上最准确。

2. ​​安卓设备​​：

   大部分安卓机无横条，但部分全面屏手机可能有虚拟导航栏。
   可通过 screenHeight - safeArea.bottom 计算高度差：

const bottomBarHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;

3. ​​开发工具模拟​​：
   开发者工具中可切换不同机型模拟横条效果。

总结​​

推荐优先使用 ​​safeArea 对比法​​ 或 ​​CSS 安全区域变量​​，既简单又能覆盖大多数场景