与 iPhone 固定的 34pt 底部安全区不同,安卓设备的“全面屏手势条”极其碎片化:华为的极窄,小米的居中,OPPO 的偏宽,而且高度从 16px 到 48px 都有。
兼容性最大的雷区:
在部分旧版安卓微信(或系统浏览器)中,env(safe-area-inset-bottom) 会返回 `0`。如果你的 CSS 写的是 `padding-bottom: env(safe-area-inset-bottom)`,那么在小米 13 等设备上,你的底部按钮会被手势条直接盖住,用户点不到。
稳健的解决方案:给 env() 加上最小值保底(Fallback)。
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
这样哪怕系统不识别安全区,你至少有 16px 的缓冲,不会和手势条重叠。在某些特殊 App 内(如钉钉),可能需要加得更厚。
你可以用本工具选择“安卓”设备预设,在底部加个按钮测试一下遮挡情况。