如何检测iOS设备home indicator高度避免页面内容被遮挡

你所说的分页组件下方居中的黑色横条是全面屏设备的Home Indicator（主屏幕指示条），注意：不同设备的横条高度存在差异，严禁写死固定数值，可根据你的开发场景选择对应方案：

H5/网页端实现 #

• 第一步先配置viewport，允许页面覆盖全屏，否则安全区变量不会生效：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 纯CSS适配不需要手动获取高度，直接使用系统提供的安全区环境变量给底部元素加边距即可，自动适配所有设备：

/* 给分页组件的外层容器加样式，避免内容被横条遮挡 */
.pagination-container {
  /* 兼容iOS 11.2以下旧版本 */
  padding-bottom: constant(safe-area-inset-bottom);
  /* 标准语法，对应底部Home Indicator的准确高度 */
  padding-bottom: env(safe-area-inset-bottom);
}

• 如果需要在JS逻辑中拿到准确高度值，可以通过临时元素计算获取：

function getHomeIndicatorHeight() {
  const el = document.createElement('div');
  el.style.cssText = 'position:fixed;bottom:0;height:env(safe-area-inset-bottom);height:constant(safe-area-inset-bottom);visibility:hidden;';
  document.body.appendChild(el);
  const height = el.offsetHeight;
  document.body.removeChild(el);
  return height;
}

非全面屏设备、桌面端设备返回的高度值为0，不会产生多余边距，无需额外做设备类型判断。

原生端实现 #

• iOS端：系统直接封装了安全区API，无需手动计算高度。UIKit开发可直接读取当前视图的view.safeAreaInsets.bottom属性获取Home Indicator高度；SwiftUI开发可直接使用.safeAreaInset(edge: .bottom)修饰符，系统会自动给内容预留出横条位置。
• 安卓端：手势导航模式下的底部指示条高度，可通过读取系统资源navigation_bar_height获取，注意需要先判断当前导航模式，传统虚拟三键模式下该值对应三键导航栏高度，不是手势指示条高度。

内容的提问来源于stack exchange，提问作者yavgz