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:


    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.

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

Log in to reply