iOS安全区域适配导致页面底部被遮挡怎么办？

ლ柯佳提问于 2026-03-01 16:17:21 阅读 4

优化

我在做移动端页面时，iPhone X及以上机型的底部导航栏总是被系统手势栏挡住，加了padding-bottom: env(safe-area-inset-bottom)也没用，是不是哪里写错了？

我试过在body和具体容器上都加了这个属性，但还是没效果，控制台也没报错，就是视觉上被盖住了。下面是我在CSS里写的代码：

.footer {
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}

安全区域移动端优化

我来解答赞 1 收藏

反馈

1 条解答

端木世杰 Lv1

这个问题我之前帮前端同事排查过，大概率是少了viewport的设置。

你的CSS本身没写错，但 env(safe-area-inset-bottom) 生效有个前提条件，就是页面内容要延伸到安全区域外。默认情况下iOS会把网页限制在安全区域内，所以你拿到的safe-area-inset-bottom值永远是0。

解决办法很简单，在HTML的meta viewport标签里加上 viewport-fit=cover：

这样页面才会真正铺满整个屏幕，safe-area-inset-bottom才能取到正确的值，你的padding才会生效。

另外建议CSS里加上constant做兼容，iOS 11.0到11.2用的是constant，11.2之后才改成env：

.footer {

  padding-bottom: constant(safe-area-inset-bottom);

  padding-bottom: env(safe-area-inset-bottom);

  background: #fff;

  position: fixed;

  bottom: 0;

  width: 100%;

}

顺序别写反了，constant放前面，env放后面，这样新版本会覆盖旧版本的值。

改完刷新一下应该就好了，这问题坑了不少人。

2026-03-01 17:00