android 14 webview 中 env(safe-area-inset-bottom) 返回非零值，是因为内核144+自动将未被 native 层消费的 windowinsets 映射为 css 变量；若未在 setonapplywindowinsetslistener 中调用 setinsets(..., insets.none)，webview 会透传该值，导致意外留白。
Android 14 WebView 中的底部留白，不是 CSS 没生效，而是 Native 层没“吃掉” Insets —— 导致 env(safe-area-inset-bottom) 被错误注入到网页中，值非零。
为什么 Android 14 WebView 突然有 env(safe-area-inset-bottom) 值？
Android WebView 内核从 144 版本起（对应 Android 14 系统），会将系统级 WindowInsets 自动映射为 CSS 环境变量。但这个行为只在 Native 层未消费 insets 时才透出给 WebView。
常见错误写法是：
- 用
ViewCompat.setOnApplyWindowInsetsListener给根 View 加了 padding - 但最后直接
return insets，没调用Builder.setInsets(..., Insets.NONE)
结果：WebView 仍能感知到底部导航栏/软键盘的 inset，env(safe-area-inset-bottom) 返回非零值（比如 48px），哪怕页面根本不需要它。
如何确认是 Native insets 消费问题？
打开 Chrome DevTools 连接 WebView，检查任意元素的 computed padding-bottom：
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
- 如果看到
padding-bottom: env(safe-area-inset-bottom)解析为具体像素（如48px），但你没在 CSS 里写这行 —— 就是 Native 透传进来的 - 检查
html或body的 computed height，若远大于视口（比如 1200px），大概率是这个透传导致布局错乱 - 对比 iOS Safari：它不会把系统 insets 注入到 env 变量里，除非你主动用 JS 注入
Native 层必须正确 consume insets（Kotlin 示例）
在 Activity 的 onCreate 中处理根 View 的 insets，关键在最后一行：必须返回已“清空”相关类型的 WindowInsetsCompat。
ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)) { v, insets ->
val types = WindowInsetsCompat.Type.navigationBars() or WindowInsetsCompat.Type.ime()
val barInsets = insets.getInsets(types)
v.updatePadding(bottom = barInsets.bottom)
// ✅ 必须构建新 insets 并置为 NONE，否则 WebView 仍能读到原始值
WindowInsetsCompat.Builder(insets).setInsets(types, Insets.NONE).build()
}
漏掉 .setInsets(..., Insets.NONE)，就等于告诉系统：“我看见了，但我不管”，WebView 接着处理。
CSS 层要不要加 env(safe-area-inset-bottom)？
要，但只加在真正需要避开安全区的元素上，且必须配 <meta name="viewport" content="..., viewport-fit=cover">：
- ✅ 推荐：固定定位的 tabbar、悬浮按钮（
.fab）、底部操作栏（.toolbar） - ❌ 禁止：加在
body、#app或全页容器上 —— 安卓 WebView 144+ 本身已注入，再加就是双倍留白 - ⚠️ 注意 fallback：仍需双写
constant()和env()，因部分安卓 WebView（如旧版 Samsung 浏览器）只认前者
示例（安全写法）：
.tabbar {
position: fixed;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
最易被忽略的点：Android 14 WebView 的 env() 是 Native 主动注入的，和 iOS 的语义完全不同——它不表示“安全区高度”，而表示“系统还没被消费掉的底部 inset 值”。修不对 Native 层，CSS 再怎么写都是治标不治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
