Looking for solutions for mobile screen notches (ie iPhone X) [solved]

[mattabdi]

I’m not really getting anywhere with these cordova / phonegap solutions for notches on mobile phones like the iPhone X:
https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

I will update if I figure this out.

tags: ios android

[mattabdi]

I simply wanted my header and footer to fill up and down where the notches are. I did not push the header and footer info (tabs) into the notches. Some pieces I’m still trying to figure out like if I really needed to edit the index.template.html and if both .png’s are required.
Steps:

• added the cordova plugin to the project: cordova-plugin-splashscreen
• in /src-cordova/config.xml, I nested inside of <platform name=“ios”>: <splash src=“res/screen/ios/Default@2x~universal~anyany.png” />
  should look like:

    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    </platform>

• created 2 blank .pngs with the dimensions of 2732x2732: “Default@2x~universal~anyany.png” and “Default@2x~universal~comany.png”
• added those png image files to /src-cordova/platforms/ios/<project name>/LaunchImage.launchimage/
• added those png image files to /src-cordova/platforms/ios/<project name>/LaunchStoryboard.imageset/