问题描述 在 Android 设备上运行 Capacitor 打包的 Vue 3 应用时，遇到虚拟导航栏（底部返回键、主页键等）和状态栏遮挡应用内容的问题。 问题表现 底部 Tab 导航栏被虚拟导航栏遮挡一部分 顶部内容被状态栏遮挡 页面底部内容贴近虚拟导航栏，没有安全间距 问题根源分析 初始状态 应用使用了沉浸式布局，在 MainActivity.java 中设置了： 这使得 WebView 内…
在 Android 设备上运行 Capacitor 打包的 Vue 3 应用时，遇到虚拟导航栏（底部返回键、主页键等）和状态栏遮挡应用内容的问题。
应用使用了沉浸式布局，在 MainActivity.java 中设置了：
WindowCompat(getWindow(),false);()(Color.TRANSPARENT);()(Color.TRANSPARENT);
这使得 WebView 内容延伸到状态栏和导航栏后面，实现了全屏显示。
最初尝试使用 CSS 的环境变量来解决：
padding-top:env(safe-area-inset-top, 0);padding-bottom:env(safe-area-inset-bottom, 0);
问题：Android WebView 不支持 CSS 的 env(safe-area-inset-*) 环境变量
通过添加调试日志，在控制台输出：
// 检查 CSS 环境变量const rootStyles =getComputedStyle(document.documentElement) console.log('CSS 环境变量原始值:',{'safe-area-inset-top': rootStyles.getPropertyValue('safe-area-inset-top'),'safe-area-inset-bottom': rootStyles.getPropertyValue('safe-area-inset-bottom'),})// 检查实际效果 console.log('body paddingTop:',getComputedStyle(document.body).paddingTop) console.log('body paddingBottom:',getComputedStyle(document.body).paddingBottom)
实验结果：
🔍 [CSS 环境变量] 原始值：[object Object] - safe-area-inset-top: "" (空字符串) - safe-area-inset-bottom: "" (空字符串) 🔍 [实验结论]: ❌ CSS 环境变量未生效 - 硬性编码起作用
结论：
env() 环境变量在 Android WebView 中返回空值env(safe-area-inset-bottom, 0) fallback 到 0，导致没有底部间距由于 CSS 环境变量不生效，改用 JavaScript 在运行时动态计算安全区域高度，并通过 CSS 变量传递给样式层。
// Capacitor 安全区域适配constsetupSafeArea=async()=>{try{const{ Capacitor }=awaitimport('@capacitor/core')// 只在原生平台上执行if(!Capacitor.isNativePlatform()){console.log('ℹ️ 非原生平台，跳过设置')return}console.log('🔍 [安全区域] 检测到原生平台，开始设置...')// 获取屏幕尺寸const screenWidth = window.screen.width const screenHeight = window.screen.height // 通过屏幕比例估算状态栏和导航栏高度// 状态栏通常是屏幕高度的 3-5% 或固定值（约 24-50dp）// 导航栏通常是 48-56dpconst estimatedStatusBarHeight = Math.min( Math.round(screenHeight *0.04),// 4% 屏幕高度50// 最大 50px)const estimatedNavBarHeight = Math.min( Math.round(screenHeight *0.05),// 5% 屏幕高度56// 最大 56px)console.log('🔍 [安全区域] 屏幕尺寸:', screenWidth,'x', screenHeight)console.log('🔍 [安全区域] 估算值 - 状态栏:', estimatedStatusBarHeight,'导航栏:', estimatedNavBarHeight)// 设置 CSS 变量const root = document.documentElement root.style.setProperty('--sat',`${estimatedStatusBarHeight}px`) root.style.setProperty('--sab',`${estimatedNavBarHeight}px`)// 更新 body 的 paddingconst body = document.body body.style.paddingTop =`${estimatedStatusBarHeight}px` body.style.paddingBottom =`${estimatedNavBarHeight}px`console.log('✅ [安全区域] 已设置 - 顶部:', estimatedStatusBarHeight,'底部:', estimatedNavBarHeight)}catch(e:any){console.log('⚠️ [安全区域] 设置失败:', e.message)}}// 应用挂载时执行 app.mount('#app').$nextTick(async()=>{awaitsetupSafeArea()// ... 其他初始化逻辑})
将所有使用 env(safe-area-inset-*) 的地方替换为 var(--sat, 0) 和 var(--sab, 0)：
src/style.css：
body{/* 顶部和底部安全区域通过 JS 动态设置 CSS 变量 */padding-top:var(--sat, 0);padding-bottom:var(--sab, 0);transition: padding-top 0.3s ease, padding-bottom 0.3s ease;}/* 页面容器 */.page-container{padding: 16px;padding-top:calc(16px + var(--sat, 0));padding-bottom:calc(80px + var(--sab, 0));min-height: 100vh;min-height: 100dvh;}
src/App.vue：
.app-container{width: 100%;height: 100%;min-height: 100vh;min-height: 100dvh;position: relative;padding-top:var(--sat, 0);/* 顶部安全区域 */padding-bottom:calc(80px + var(--sab, 0));/* 底部安全区域 + 导航栏高度 */box-sizing: border-box;}.tab-bar{position: fixed;bottom: 0;left: 0;right: 0;height: auto;min-height:calc(56px + var(--sab, 0));display: flex;justify-content: space-around;align-items: flex-start;background: #fff;border-top: 1px solid #f0f0f0;z-index: 1000;padding-top: 10px;padding-bottom:calc(10px + var(--sab, 0));box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);}
src/views/Login.vue：
.login-container{padding-top:calc(16px + var(--sat, 0));padding-bottom:calc(32px + var(--sab, 0));}.login-form{padding: 36px 32px;padding-top:calc(36px + var(--sat, 0));padding-bottom:calc(32px + var(--sab, 0));}
src/views/Classmates.vue 和 src/views/Tasks.vue：
.page-container{padding: 16px;padding-top:calc(16px + var(--sat, 0));padding-bottom:calc(120px + var(--sab, 0));}
src/views/Tasks.vue (浮动按钮)：
.fab-button{position: fixed;bottom:calc(90px + var(--sab, 0));right: 16px;}
保持沉浸式布局，但不隐藏系统栏：
@OverridepublicvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);// 启用边缘到边缘显示 (沉浸式)WindowCompat.setDecorFitsSystemWindows(getWindow(),false);// 设置透明状态栏和导航栏setupTransparentSystemBars();}privatevoidsetupTransparentSystemBars(){// 设置状态栏和导航栏透明getWindow().setStatusBarColor(android.graphics.Color.TRANSPARENT);getWindow().setNavigationBarColor(android.graphics.Color.TRANSPARENT);// 设置窗口标志以实现沉浸式int flags =WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS;getWindow().setFlags(flags, flags);// 设置为边缘到边缘布局，但不隐藏系统栏// 让 CSS 的 safe-area-inset 来处理间距View decorView =getWindow().getDecorView();int uiOptions =View.SYSTEM_UI_FLAG_LAYOUT_STABLE |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION; decorView.setSystemUiVisibility(uiOptions);}@OverridepublicvoidonWindowFocusChanged(boolean hasFocus){super.onWindowFocusChanged(hasFocus);if(hasFocus){// 窗口获得焦点时，重新应用边缘到边缘布局View decorView =getWindow().getDecorView();int uiOptions =View.SYSTEM_UI_FLAG_LAYOUT_STABLE |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION; decorView.setSystemUiVisibility(uiOptions);}}
关键点：
SYSTEM_UI_FLAG_FULLSCREEN 和 SYSTEM_UI_FLAG_HIDE_NAVIGATIONSYSTEM_UI_FLAG_IMMERSIVE_STICKYLAYOUT_FULLSCREEN 和 LAYOUT_HIDE_NAVIGATION 实现边缘到边缘布局<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
添加 viewport-fit=cover 启用全面屏适配。
env(safe-area-inset-*) 是 iOS Safari 引入的特性var(--sat, 0) 确保非原生平台正常显示WindowCompat.setDecorFitsSystemWindows(getWindow(), false) 启用边缘到边缘LAYOUT_FULLSCREEN 和 LAYOUT_HIDE_NAVIGATION 让内容延伸到系统栏后面
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online