Well I don't usually post questions on stackoverflow but I find myself stuck here. So I am building an app with PhoneGap & Cordova. I don't this it's relevant but I'm using framework7 for the UI.
Splashscreens works great on Android devices and most iOS devices. On iPhone having a notch (iPhone X/XR/Xs/Xs Max) It seems it won't get rid of some black bar below and above the screen like here: Cordova app not displaying correctly on iPhone X (Simulator)
I must say I have done a lot of researches and visited a bunch of different stackoverflow threads, however, I still can't get to make those disappear :(.
Here is a list of what I have tried so far:
- Reboot the iOS device to clear the splashscreen cache
RESULT: no change
- Add viewport-fit=cover in the meta tags
RESULT: no change
- Add Legacy Splashscreens (I checked that all the image sizes are according to the width and height attribute).
RESULT: No changes. Black bars around the screen (top & bottom). The viewport looks somewhat similar to an iphone 6/7.
<splash src="res/screen/ios/320x480.png" width="320" height="480" />
<splash src="res/screen/ios/640x960.png" width="640" height="960" />
<splash src="res/screen/ios/640x1136.png" width="640" height="1136" />
<splash src="res/screen/ios/768x1024.png" width="768" height="1024" />
<splash src="res/screen/ios/1536x2008.png" width="1536" height="2008" />
<splash src="res/screen/ios/1536x2048.png" width="1536" height="2048" />
<splash src="res/screen/ios/i6.png" width="750" height="1334" />
<splash src="res/screen/ios/i6s.png" width="1242" height="2208" />
<splash src="res/screen/ios/ixr.png" width="828" height="1792" />
<splash src="res/screen/ios/ixsm.png" width="1242" height="2688" />
- Add SpringBoard images (two different code tried. In each case, I verified that the images' size were according to the cordova & apple's documentation):
RESULT: worst result yet! The viewport now seems rather similar to an iPhone 4 or 5. So the screen didn't shrink, however, the screen and the keyboard looks "zoomed in" or like stretched
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
and
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
If any of you have a suggestion or an idea please let me know! I've had this issue for now few weeks and I feel lost.
Extra Infos:
I build the iOS app using build.phonegap.com since I don't own a MacBook and my computer is not powerful enough for a MacOs Vm
Here is my full code:
<?xml version='1.0' encoding='utf-8'?>
<widget id="my.pkg.id" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My app name</name>
<description>
Description
</description>
<author email="emailadress@email.com" href="email.com">
My Name
</author>
<content src="index.html" />
<config-file platform="android" parent="/manifest" mode="merge">
<application android:theme="@android:style/Theme.Black.NoTitleBar"></application>
</config-file>
<plugin name="cordova-plugin-statusbar" source="npm" />
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="cordova-plugin-backbutton" source="npm" />
<plugin name="cordova-plugin-ios-camera-permissions" source="npm" />
<gap:plugin name="cordova-plugin-customurlscheme" source="npm">
<plugin name="cordova-plugin-device" source="npm" />
<param name="URL_SCHEME" value="myurlschm" />
</gap:plugin>
<plugin name="cordova-plugin-wkwebviewxhrfix" />
<plugin name="cordova-plugin-wkwebview-engine" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<engine name="ios" spec="latest" />
<plugin name="cordova-plugin-splashscreen" source="npm" />
<plugin name="cordova-universal-links-plugin" source="npm" />
<plugin name="cordova-plugin-disable-ios11-statusbar" source="npm" spec="*" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="*" />
<plugin name="phonegap-plugin-barcodescanner" source="npm" spec="*" />
<allow-navigation href="data:*" />
<allow-intent href="data:*" />
<access origin="data:*" />
<allow-navigation href="https://code.jquery.com/*" />
<allow-intent href="https://code.jquery.com/*" />
<access origin="https://code.jquery.com/*" />
<allow-navigation href="https://ajax.googleapis.com/*" />
<allow-intent href="https://ajax.googleapis.com/*" />
<access origin="https://ajax.googleapis.com/*" />
<allow-navigation href="https://maxcdn.bootstrapcdn.com/*" />
<allow-intent href="https://maxcdn.bootstrapcdn.com/*" />
<access origin="https://maxcdn.bootstrapcdn.com/*" />
<allow-navigation href="https://debug1.phonegap.com/*" />
<allow-intent href="https://debug1.phonegap.com/*" />
<access origin="https://debug1.phonegap.com/*" />
<allow-navigation href="https://debug2.phonegap.com/*" />
<allow-intent href="https://debug2.phonegap.com/*" />
<access origin="https://debug2.phonegap.com/*" />
<allow-navigation href="https://debug3.phonegap.com/*" />
<allow-intent href="https://debug3.phonegap.com/*" />
<access origin="https://debug3.phonegap.com/*" />
<allow-navigation href="https://debug4.phonegap.com/*" />
<allow-intent href="https://debug4.phonegap.com/*" />
<access origin="https://debug4.phonegap.com/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="googlechrome:*" />
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to save pictures there</string>
</edit-config>
<access origin="*" />
<preference name="FadeSplashScreenDuration" value="1250" />
<preference name="orientation" value="portrait" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="android-minSdkVersion" value="17" />
<preference name="AndroidLaunchMode" value="singleTask" />
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/uses-permission" xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.CAMERA" />
</edit-config>
<allow-intent href="market:*" />
<preference name="DisallowOverscroll" value="true" />
<preference name="LoadUrlTimeoutValue" value="10000" />
<preference name="ErrorUrl" value="index.html" />
<preference name="android-minSdkVersion" value="17" />
<preference name="AndroidLaunchMode" value="singleTop" />
<preference name="android-targetSdkVersion" value="29" />
<preference name="FadeSplashScreenDuration" value="1250" />
<preference name="SplashScreenDelay" value="3000" />
<icon src="test.png" qualifier="ldpi" />
<icon src="test.png" qualifier="mdpi" />
<icon src="test.png" qualifier="hdpi" />
<icon src="test.png" qualifier="xhdpi" />
<icon src="test.png" qualifier="xxhdpi" />
<icon src="test.png" qualifier="xxxhdpi" />
<icon src="test.png" qualifier="fr-xxhdpi" />
<splash src="ldpi.png" qualifier="ldpi" />
<splash src="mdpi.png" qualifier="mdpi" />
<splash src="hdpi.png" qualifier="hdpi" />
<splash src="xhdpi.png" qualifier="xhdpi" />
<splash src="fr-xhdpi.png" qualifier="fr-xhdpi" />
<splash src="portrait-xxhdpi.png" qualifier="port-xxhdpi" />
<splash src="landscape-xxhdpi.png" qualifier="land-xxhdpi" />
<splash src="xxxhdpi.png" qualifier="xxxhdpi" />
</platform>
<platform name="ios">
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<preference name="Allow3DTouchLinkPreview" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="EnableViewportScale" value="true" />
<preference name="DisallowOverscroll" value="true" />
<preference name="deployment-target" value="10.0" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="blacktranslucent" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="FadeSplashScreenDuration" value="750" />
<preference name="SplashScreenDelay" value="1000" />
<splash src="res/screen/ios/320x480.png" width="320" height="480" />
<splash src="res/screen/ios/640x960.png" width="640" height="960" />
<splash src="res/screen/ios/640x1136.png" width="640" height="1136" />
<splash src="res/screen/ios/768x1024.png" width="768" height="1024" />
<splash src="res/screen/ios/1536x2008.png" width="1536" height="2008" />
<splash src="res/screen/ios/1536x2048.png" width="1536" height="2048" />
<splash src="res/screen/ios/i6.png" width="750" height="1334" />
<splash src="res/screen/ios/i6s.png" width="1242" height="2208" />
<splash src="res/screen/ios/ixr.png" width="828" height="1792" />
<splash src="res/screen/ios/ixsm.png" width="1242" height="2688" />
<icon src="res/icon/ios/icon-1024.png" width="1024" height="1024" />
<icon src="res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />
<icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />
<icon src="res/icon/ios/icon-small-40.png" width="40" height="40" />
<icon src="res/icon/ios/icon-small-40@2x.png" width="80" height="80" />
<icon src="res/icon/ios/icon-small-40@3x.png" width="120" height="120" />
<icon src="res/icon/ios/icon-small-50.png" width="50" height="50" />
<icon src="res/icon/ios/icon-small-50@2x.png" width="100" height="100" />
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
<icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
<icon src="res/icon/ios/icon-167.png" width="167" height="167" />
<icon src="res/icon/ios/icon-83.5@2x.png" width="167" height="167" />
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
</platform>
<platform name="windows">
<preference name="FadeSplashScreenDuration" value="750" />
<preference name="SplashScreenDelay" value="3000" />
</platform>
</widget>
Edit:
Should I post an issue on Phonegap build or am I doing something wrong here?
