.footer { padding-bottom: 12px; }
.footer {
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
底部按钮加了 env(safe-area-inset-bottom) 的内边距,安卓上算出来是零,按钮还是紧贴屏幕下沿,看着很别扭,换成 iOS 就正常,这个差异很容易被漏掉。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:安全区变量只有支持 viewport-fit=cover 的浏览器才返回值,安卓 Chrome 和多数国产内核直接给零,单靠它兜不住底部。这一层保底必须自己写,否则安卓永远贴边。
「env 安全区为 0」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。监控和日志的时间要对上,时区不一致会多绕很大一圈。
临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
处理上按这个顺序:给内边距套一层 max(),前面放十二像素保底,后面接安全区变量;安卓端按机型单独补一段固定间距,别和 iOS 共用一套值;真机上量按钮到屏幕底边的实际像素,别只看模拟器。
确认没问题再收工,安卓和 iPhone 上按钮都离底边有一段距离,不会压到手势条,两种机型都要看。
