iosiphonecordovasplash-screenphonegap
Black bars when using of Cordova's splashscreen on iOS
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="[email protected]" 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/[email protected]" width="58" height="58" />
<icon src="res/icon/ios/[email protected]" width="87" height="87" />
<icon src="res/icon/ios/icon-small-40.png" width="40" height="40" />
<icon src="res/icon/ios/[email protected]" width="80" height="80" />
<icon src="res/icon/ios/[email protected]" width="120" height="120" />
<icon src="res/icon/ios/icon-small-50.png" width="50" height="50" />
<icon src="res/icon/ios/[email protected]" width="100" height="100" />
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/[email protected]" width="114" height="114" />
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/[email protected]" width="120" height="120" />
<icon src="res/icon/ios/[email protected]" width="180" height="180" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/[email protected]" width="144" height="144" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/[email protected]" width="152" height="152" />
<icon src="res/icon/ios/icon-167.png" width="167" height="167" />
<icon src="res/icon/ios/[email protected]" 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?
Solution
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
Surely they aren't providing the proper support for all splash screen sizes, or you haven't implemented all sizes correctly. Check their documentation on that. Whenever Xcode is updated, and this happens often, new splash screen sizes are added.
NOTICE the linked article may be outdated or it will be the second a new Xcode version with new screen sizes is released.
Example sizes:
- Develop application using Storyboard or xib file
- XCode 16 @IBInspectable properties not showing in the xib file
- Xcode 16.0 : unexpected service error: The Xcode build system has crashed
- Xcode 11 archive gives PhaseScriptExecution failed
- Compiler differences
- React Native - UIViewControllerBasedStatusBarAppearance warning
- Firebase Undefined symbols for architecture x86_64
- How to use EventKit (Calendar) integration and still support iOS 3.x (MonoTouch)?
- How to set cornerRadius on a imageview inside a table view cell
- Unity - Is this necessary to always apply force in fixed update
- UIRefreshControl not showing in landscape when in a navigation controller with large titles
- SwiftUI shrink view on dragging edges
- Android 13 How to save image in galery .Net MAUI
- OSStatus error:[-34018] Internal error when a required entitlement isn't present error on device
- Pair to Mac in Visual Studio 2022 Error: Object reference not set to an instance of an object
- iOS app reject because of healthkit
- Is 'allowFileAccessFromFileURls' still available on iOS WebKit?
- No simulators (Xcode mismatch) .Net MAUI iOS(XCode 16.0)
- Firebase App Check Throws 401 Error on iOS Devices
- SwiftUI: Shape using bezier curve cannot fill with gradient
- Why am I getting "[__NSArrayI allKeys]: unrecognized selector sent to instance" / why is NSDictionary transforming?
- Store App names in NSArray from JSON DATA which Stored in NSDictionary
- SensorKit - Fetching data don't call results delegate function
- UNIRest Objective-C Currency Converter API
- Xcode build system crashes with "unexpected service error" on iPhone 16 simulator
- Get high res icon image as UIImage in iOS 18
- How does Google's custom iOS keyboard, Gboard, programmatically dismiss the frontmost app?
- How to Apply subscriptionStatusTask to TabView in SwiftUI
- How to create spacing between items in a SwiftUI List view?
- iOS Simulator scrolls too fast on Apple M1