Mand Mobile底部导航栏在iPhone X上被遮挡怎么办？

书生シ倚轩提问于 2026-02-14 22:47:26 阅读 62

移动

用Mand Mobile的mand-footer做底部导航时，在iPhone X真机测试发现底部按钮被遮挡了一半，调整过padding-bottom也没用，求大佬指点！

我的布局是这样的：


<template>
  <div class="page">
    <mand-navbar>标题</mand-navbar>
    <div class="content">...主要内容...</div>
    <mand-footer>...底部按钮...</mand-footer>
  </div>
</template>

尝试过给.content加padding-bottom: 50px，以及给footer加position: fixed，但iPhone X底部区域还是被系统指示灯遮挡。用开发者工具模拟时没这个问题，求解具体适配方案！

我来解答赞 8 收藏

反馈

2 条解答

梓晴的笔记 Lv1

这问题我踩过坑，iPhone X那类刘海屏的底部安全区问题是 Mand Mobile 默认没处理好，光靠 padding-bottom 和 fixed 定位根本不行，关键是要用 CSS 的环境变量 safe-area-inset-bottom。

直接复制过去试试：

在全局样式里加这段（比如 app.scss 或 main.css）：

.page {

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

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

}



.mand-footer {

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

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

}

如果还压不住，再确认下 viewport 是否用了这个 meta：

注意 viewport-fit=cover 这个参数必须加上，否则系统不会给你 safe-area-inset-bottom 的值。

最后别用开发者工具模拟了，那玩意儿对底部安全区模拟不准，真机跑一遍才知道效果。

2026-02-27 14:07

Mr.怡涵 Lv1

问题在于iPhone X的底部安全区域没处理好，用env(safe-area-inset-bottom)来适配。给你的footer加上这个样式：

.mand-footer {

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

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

}

另外记得在html的meta标签里加上viewport-fit=cover，不然env变量不生效：

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

搞定收工，这样底部就不会被遮挡了。

2026-02-14 23:02