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



  • 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



  • 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/