奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

安卓手势导航栏 H5 动态适配

与 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 内(如钉钉),可能需要加得更厚。

你可以用本工具选择“安卓”设备预设,在底部加个按钮测试一下遮挡情况。

常见问题

安卓有类似 env(safe-area-inset-bottom) 吗?
在现代安卓(Android 10+ / Chrome 80+)中支持,但部分老旧机型或特定 App 的 WebView 不支持,会返回 0。
怎么用 CSS 写安全区的回退方案?
使用 calc:padding-bottom: calc(16px + env(safe-area-inset-bottom)); 这样即使环境变量取不到,也有 16px 的固定 padding。

相关工具