移动端底部导航固定后,正文最后一段被压住,iPhone 上更明显。乍看像缓存或者权限的锅,追下去往往不是。

body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.bar { padding-bottom: env(safe-area-inset-bottom); }

追下去是这么回事:固定元素脱离了文档流,正文没有为它预留空间,也没考虑底部安全区。

「固定底栏遮挡」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

具体做法是,给正文容器补底部内边距;叠加安全区变量;固定栏自身也做安全区适配。

验收就看一点,正文最后一段完整可见,全面屏机型无遮挡。

作者 9823189