Cordova iOS/Android刘海屏、状态栏及软导航栏适配方案咨询

顶部状态栏适配 #

Android没有原生提供类似iOS的safe-area-inset-* CSS变量，可通过以下两种方案实现适配：

• 方案1：使用官方cordova-plugin-statusbar插件（推荐）
  插件加载完成后可直接获取状态栏高度，也可直接关闭状态栏 overlay 特性，让WebView默认从状态栏下方开始渲染，无需手动加padding：

  document.addEventListener('deviceready', () => {
    // 方式1：直接让WebView不被状态栏覆盖，适配一步完成
    window.StatusBar.overlaysWebView(false);
  
    // 方式2：如果需要自定义状态栏样式，手动获取高度加padding
    const statusBarHeight = window.StatusBar.height;
    document.querySelector('.app-header').style.paddingTop = `${statusBarHeight}px`;
  }, false);
  

• 方案2：自定义原生接口获取高度
  若不想引入插件，可在Android原生层通过Resources.getDimensionPixelSize获取状态栏高度，通过Cordova的JS接口暴露给前端，后续逻辑和方案1一致。

底部软导航栏+软键盘适配 #

resize事件不触发、软键盘收起后导航栏遮挡底部内容是Android WebView的常见问题，按以下步骤修复：

1. 修改软键盘适配模式
   首先确认AndroidManifest.xml中主Activity的windowSoftInputMode属性为adjustResize，Cordova项目可直接在config.xml中添加配置，无需修改原生文件：

   <preference name="AndroidWindowSoftInputMode" value="adjustResize" />
   

   该配置会让WebView在软键盘弹出/收起、导航栏显隐时重新计算布局，触发resize事件。
2. 动态适配底部导航栏高度
   使用cordova-plugin-navigationbar插件或自定义原生接口获取底部软导航栏高度，结合窗口高度变化判断软键盘状态，动态更新底部导航的padding：

   let navBarHeight = 0;
   let lastInnerHeight = window.innerHeight;
   
   // 设备初始化完成后获取导航栏高度
   document.addEventListener('deviceready', () => {
     navBarHeight = window.NavigationBar?.height || 0;
     updateBottomPadding();
   });
   
   // 统一更新底部内边距
   function updateBottomPadding() {
     // 窗口高度小于屏幕高度80%时判定软键盘弹出，此时不需要加导航栏padding
     const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
     const bottomPadding = isKeyboardOpen ? 0 : navBarHeight;
     document.querySelector('.app-bottom-nav').style.paddingBottom = `${bottomPadding}px`;
   }
   
   // 监听resize事件更新
   window.addEventListener('resize', updateBottomPadding);
   
   // 兜底轮询：部分定制ROM可能不会触发resize，100ms轮询高度变化，性能开销可忽略
   setInterval(() => {
     if (window.innerHeight !== lastInnerHeight) {
       lastInnerHeight = window.innerHeight;
       updateBottomPadding();
     }
   }, 100);
   

3. 可选优化配置
   若仍出现布局偏移，可在config.xml中添加以下配置：

   <preference name="EnableViewportScale" value="true" />
   <preference name="DisallowOverscroll" value="true" />
   

内容的提问来源于stack exchange，提问作者MDP77