iOS智能横幅导致固定在屏幕底部的元素被底部工具栏遮挡问题

适配方案 #

最优CSS适配方案（无JS，适配iOS11+全场景）

1. 先修改页面viewport meta标签，新增viewport-fit=cover参数：

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

2. 给底部fixed定位的元素添加安全区域偏移配置：

.bottom-fixed-component {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  /* 如果需要额外的底部间距，可通过calc组合，示例：
  bottom: calc(12px + env(safe-area-inset-bottom));
  */
}

该方案会自动适配Apple Smart Banner、底部小黑条、浏览器导航栏挤压等所有场景，不需要手动枚举设备尺寸，兼容性覆盖绝大多数存量iOS设备。

兼容老旧版本的JS适配方案

如果需要支持iOS11以下的设备，可以用Visual Viewport API实现动态偏移计算：

const bottomComponent = document.querySelector('你底部组件的选择器');
function adjustBottomPos() {
  if (!window.visualViewport) return;
  // 自动计算可视区域底部到页面视口底部的偏移量
  const bottomOffset = window.innerHeight - (window.visualViewport.offsetTop + window.visualViewport.height);
  bottomComponent.style.bottom = `${bottomOffset}px`;
}
// 绑定相关触发事件
window.visualViewport?.addEventListener('resize', adjustBottomPos);
window.addEventListener('load', adjustBottomPos);
window.addEventListener('resize', adjustBottomPos);

该方案同样不需要硬编码任何设备参数或Smart Banner高度，适配性远高于枚举设备尺寸的方案。

注意事项 #

不要硬编码Smart Banner的固定高度，该高度在不同设备、系统版本、横竖屏状态下都会变化，硬编码后续会出现适配问题。

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