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_aspectto 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 thewindow.loadevent to trigger the mode at the right times. - The
onSystemUiVisibilityChangelistener 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.
3. Optional (But Highly Recommended): Upgrade Cordova-Android
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
setSystemUiVisibilitycall 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




