iPhone X独立模式下Sticky底部栏无法贴合屏幕底部问题

这个问题我之前帮好几个开发者排查过，核心是iPhone X系列的安全区域（Safe Area）适配差异——普通浏览器模式下，浏览器自身的UI已经帮你处理了安全区的占位，但独立（standalone）模式下Web应用是全屏运行的，没有浏览器UI的遮挡，底部的Home Indicator区域就会露出白间隙，你的粘性底部栏没跟上这个变化。

给你两个亲测有效的步骤来解决：

1. 修正Viewport设置，让页面充满全屏 #

首先确保你的HTML头部的viewport meta标签加上viewport-fit=cover，这个属性会让页面内容延伸到屏幕的安全区外，是适配的基础：

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

如果之前没有这个属性，独立模式下页面会自动预留安全区的空白，这就是你看到的白间隙来源之一。

2. 用CSS安全区变量适配底部栏 #

接下来给你的粘性底部栏添加安全区的内边距，利用iOS提供的env() CSS变量来获取底部安全区的高度：

.sticky-bottom-bar {
  position: sticky;
  bottom: 0;
  /* 关键：用安全区高度填充底部间隙 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 确保底部栏的背景色覆盖到安全区，避免白块 */
  background-color: #你的底部栏背景色;
  /* 可选：如果底部栏是固定高度，用calc调整总高度 */
  /* height: calc(60px + env(safe-area-inset-bottom)); */
}

如果你的底部栏用的是position: fixed，那可以直接把bottom值设为env(safe-area-inset-bottom)，同时保证宽度100%：

.fixed-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  background-color: #你的底部栏背景色;
}

额外提示 #

测试前记得清除Safari的缓存，并重新添加到主屏幕——独立模式的Web应用有时候会缓存旧的viewport设置，导致新的代码不生效。

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