You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android刘海屏设备Cordova沉浸式模式黑边问题求助

Hey there! Let's tackle this notch screen fullscreen issue in your Cordova Android app. I've run into similar problems before, so here's a step-by-step fix that should resolve both the black bars and the delay/UI reset issues:

1. Fix Your config.xml for Notch & Fullscreen Compatibility

The root cause of black bars on notch devices often lies in missing Android-specific configurations. Update your edit-file section to properly support modern screen ratios and notch areas:

<edit-file parent="/manifest/application/activity" target="AndroidManifest.xml">
    <!-- Support ultra-wide screens (covers most notch devices) -->
    <meta-data android:name="android.max_aspect" android:value="2.4" />
    <!-- Explicitly enable notch support for some manufacturers -->
    <meta-data android:name="android.notch_support" android:value="true" />
    <!-- Use a modern fullscreen theme and enable content extension into notch areas (Android 9+) -->
    <activity 
        android:resizeableActivity="false" 
        android:theme="@android:style/Theme.Material.Light.NoActionBar.Fullscreen"
        android:windowLayoutInDisplayCutoutMode="shortEdges" />
</edit-file>
  • windowLayoutInDisplayCutoutMode="shortEdges" tells Android to render your app content under the notch and bottom rounded corners, eliminating those black bars.
  • Bumping max_aspect to 2.4 ensures your app doesn't get letterboxed on ultra-wide screens.

2. Optimize the Fullscreen Plugin Call (No More 2s Delay!)

That 2000ms delay is a hack to wait for the WebView to load, but we can do better. Instead, trigger the immersive mode at the right lifecycle points and add safeguards for system UI changes:

document.addEventListener('deviceready', function() {
    // Initialize immersive mode as soon as Cordova is ready
    setupImmersiveMode();

    // Re-apply when the page finishes loading (ensures WebView is fully rendered)
    window.addEventListener('load', setupImmersiveMode);

    // Re-apply when the app comes back from background (fixes UI resets after multitasking)
    document.addEventListener('resume', function() {
        // Short 100ms delay to let system state stabilize
        setTimeout(setupImmersiveMode, 100);
    });

    // Listen for system UI changes (like when the notification shade is pulled down)
    if (window.AndroidFullScreen) {
        AndroidFullScreen.onSystemUiVisibilityChange(function(visibility) {
            // If system UI becomes visible, re-enable immersive mode after a short delay
            if (!(visibility & AndroidFullScreen.SYSTEM_UI_FLAG_FULLSCREEN)) {
                setTimeout(setupImmersiveMode, 300);
            }
        });
    }
});

function setupImmersiveMode() {
    if (window.AndroidFullScreen) {
        // The plugin's `immersiveMode()` method already handles hiding system UI
        // and extending content under status/navigation bars—no need for extra calls
        window.AndroidFullScreen.immersiveMode(
            () => console.log('Immersive mode activated'),
            err => console.error('Failed to enable immersive mode:', err)
        );
    }
}
  • We ditch the 2s delay and use Cordova's lifecycle events (deviceready, resume) plus the window.load event to trigger the mode at the right times.
  • The onSystemUiVisibilityChange listener fixes the issue where black bars return after pulling down the notification shade—it automatically re-enables immersive mode when the UI is hidden again.

Your current cordova-android version is 7.1.4, which is quite old (released in 2018). Newer versions (9.x+) have better support for modern Android features like notch screens and fullscreen behavior. Upgrading will make future compatibility easier and may resolve edge cases automatically.

Final Checks

  • Make sure you've removed any conflicting fullscreen preferences or code (like the manual setSystemUiVisibility call you tried earlier—let the plugin handle it).
  • Test on multiple notch devices (different manufacturers like Samsung, Xiaomi, Google) since some have their own notch implementations.

That should get your app running fullscreen without black bars or delays on both notch and non-notch devices!

内容的提问来源于stack exchange,提问作者Fradniev Gonzalez

火山引擎 最新活动