iPhone X/XR/XS/11端Safari网页底部固定导航失效求助

我之前在适配iOS Safari的固定底部导航时也碰到过一模一样的问题，虽然加了viewport-fit=cover，但安全区域的处理没到位就会出现这种底部空白的情况。咱们一步步来解决：

问题根源 #

iPhone X及以后的机型有**安全区域（Safe Area）**的概念，即使设置了viewport-fit=cover，浏览器默认不会让元素自动延伸到屏幕的圆角、刘海或底部指示条区域。你原来的margin-bottom: -35px不仅没解决问题，反而可能让导航栏向上偏移，导致底部露出空白。

具体解决方案 #

1. 确认viewport标签（你已设置的标签没问题，确保位置正确）

你的meta标签是正确的，要把它放在<head>的靠前位置，避免被其他代码干扰：

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">

2. 修改底部导航栏的CSS

删掉margin-bottom: -35px，改用iOS Safari支持的安全区域CSS变量env(safe-area-inset-bottom)来适配底部：

.mobile-bottom-nav {
  position: fixed;
  position: -ms-device-fixed;
  bottom: 0px;
  /* 新增：用padding-bottom填充安全区域，避免导航内容被底部指示条遮挡 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 调整高度，把安全区域高度算进去，让导航栏延伸到屏幕最底部 */
  height: calc(80px + env(safe-area-inset-bottom));
  width: 100%;
  left: 0px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid #c5c5c5;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-direction: row;
  z-index: 999;
  /* 确保padding不会让导航栏宽度超出屏幕 */
  box-sizing: border-box;
}

3. 兼容旧版iOS（可选）

如果需要兼容iOS 11.2及更早版本，可以同时加上constant()（注意顺序，旧版语法放前面）：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
height: calc(80px + constant(safe-area-inset-bottom));
height: calc(80px + env(safe-area-inset-bottom));

为什么这样有效？ #

• env(safe-area-inset-bottom)会自动获取当前设备底部安全区域的高度（比如iPhone X的底部指示条高度是34px）。
• 通过calc()把导航栏高度加上安全区域高度，让整个导航栏从屏幕顶部安全区域一直延伸到最底部，直接覆盖原来的空白区域。
• box-sizing: border-box确保添加的padding不会让导航栏宽度超出屏幕范围。

你可以先按上面的修改替换原有样式，再在目标iPhone设备上测试，应该就能解决底部空白且导航栏固定的问题了。

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