Unsafe areas behind notches in the screen IOS 14 changes

Question

Cordova IOS app shows white screen. I am using xcode Version 12.0. Cordova IOS platform version is 6.1.0. (or 6.1.1) Cordova version is 10.0.0. I am doing all changes for IOs14. for iPhone XR devices I am using meta tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1,  width=device-width, viewport-fit=cover">

but still after first launch I am seeing white space below to notch area. Below are the plugin details and preferences in config.xml file.

Cordova 10
Cordova-ios: 6.1.1
**@globules-io/cordova-plugin-ios-xhr 1.1.0 "Cordova WKWebView File XHR Plugin"**
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-camera 2.3.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-keyboard 1.2.0 "Keyboard"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-whitelist 1.3.4 "Whitelist"
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

enter image description here

Answer 1

You didn't include the height in your viewport, try

 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">

Answer 2

I use

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Make sure you have the safe area css like:

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

You'll have to look intoVisualViewport to keep the bottom menu at the bottom.

Basically you force the full height, of the viewport div.

//not tested
window.visualViewport.addEventListener('resize', function () {
document.getElementById("myDiv").style.height = window.innerHeight;
});

Especially if your app has orientation changes.