在Capacitor/Cordova中监听应用屏幕尺寸变化的实现方案

WebView的window resize事件可靠性分析 #

在Capacitor应用中，window resize事件在绝大多数场景下是可靠的：当应用进入分屏模式、折叠屏切换状态时，WebView的视口尺寸会同步变化，触发resize事件。你可以直接在前端监听该事件来处理尺寸变化逻辑：

window.addEventListener('resize', () => {
  const { innerWidth, innerHeight } = window;
  // 根据尺寸判断分屏比例或布局适配
  console.log(`当前视口尺寸：${innerWidth}x${innerHeight}`);
});

需要注意几个边缘情况：

• 部分Android折叠屏设备在状态切换时，系统配置变更的触发可能略早于WebView的resize事件，存在短暂延迟；
• 如果应用在AndroidManifest中配置了android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"（Capacitor默认已包含相关配置），原生Activity不会重建，但WebView的resize事件仍会正常触发。

原生层补充监听方案（精准处理分屏/折叠） #

如果需要精准区分「普通窗口缩放」和「分屏/折叠状态切换」，或者要获取系统层面的折叠状态信息，建议编写轻量的Capacitor原生插件，监听Android的onConfigurationChanged回调，再将事件传递到前端：

原生Android插件核心逻辑 #

@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  // 获取当前屏幕像素尺寸
  DisplayMetrics metrics = new DisplayMetrics();
  getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
  int screenWidth = metrics.widthPixels;
  int screenHeight = metrics.heightPixels;

  // 判断折叠屏状态（Android 11+支持）
  boolean isFolded = false;
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
    WindowManager windowManager = getActivity().getSystemService(WindowManager.class);
    if (windowManager != null) {
      for (DisplayFeature feature : windowManager.getDisplay().getDisplayFeatures()) {
        if (feature instanceof FoldingFeature) {
          isFolded = ((FoldingFeature) feature).getState() == FoldingFeature.State.FOLDED;
          break;
        }
      }
    }
  }

  // 判断是否处于分屏模式
  boolean isSplitScreen = (newConfig.screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) 
                          == Configuration.SCREENLAYOUT_SIZE_SMALL;

  // 发送事件到前端
  bridge.send("screenStateChanged", new JSObject() {{
    put("width", screenWidth);
    put("height", screenHeight);
    put("isFolded", isFolded);
    put("isSplitScreen", isSplitScreen);
  }});
}

前端监听插件事件 #

import { Plugins } from '@capacitor/core';
const { ScreenStatePlugin } = Plugins;

// 监听原生传递的屏幕状态变更事件
ScreenStatePlugin.addListener('screenStateChanged', (state) => {
  console.log('屏幕状态更新：', state);
  // 这里处理分屏/折叠对应的业务逻辑
});

方案选择建议 #

• 若仅需监听屏幕尺寸变化来做布局适配，前端resize事件完全足够，实现简单且跨平台兼容（iOS端窗口变化也能触发）；
• 若需要精准识别分屏、折叠状态等系统级信息，或者要处理Android端的配置变更延迟问题，建议结合原生插件方案，覆盖更多边缘场景。

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