Displaying the app correctly on the iPhoneX

Hello guys,   Does anyone know what should be changed within PhoneGap package (config.xml, index.html...) in order to display the application correctly on the iPhoneX? I am reading about that but maybe some of you already have experience with this. Also, I am not able to test it directly on the device and I am looking for the best solution for testing until I acquire the device. Any advice will be helpful.   Thank you in advance.
3 answers

Hi David, I released an update of our mobile app with iphone x support. You need to configure the storyboard images in your phonegap package, see https://github.com/mendix/hybrid-app-template/blob/master/IPHONEX.md

For testing I used a macbook with xcode and simulator. It works, but it's not a real device. I have seen comments that simulator behaves different than real device, so therefore patched the splashscreen and statusbar plugins to be safe:

    <plugin name="cordova-plugin-splashscreen" source="npm" spec="5.0.2" />
    <plugin name="cordova-plugin-statusbar" source="npm" spec="2.4.1" />

For me the biggest issue was that I was required to use xcode on a mac to create the actual build for the app store, due to a bug in PGB. This bug makes sure your mobile app is placed over the statusbar, and the clock etc is gone.  

You can create a workaround to fix this is by using the mobile features widget, but it comes with trade-offs like jumpy loader. Not sure if that is what you want.

The bug I'm referring to is submitted here: https://github.com/phonegap/build/issues/621 If you can give this issue a thumbs-up, then maybe it will get picked up sooner:)

About the index.html. For iphone x you need to add the viewport-fit=cover to the meta tag. If you check out the phonegap package, you will find that it's already there.

Then the next step is to fix them nodge. Add the mobile-container class to the scroll container of your phone layout(s), and add the following css in your theme.

.mobile-container {
    /* Status bar height on iOS 11.0 */
    margin: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    /* Status bar height on iOS 11+ */
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);   

Also make sure to adjust the footer of your app. In our project we use action buttons in the footer, so you do not want them to be placed over the virtual home button. For a regular mendix footer, you need to add:

.mx-dataview-controls {
   margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
   margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */

Use this phonegap blog for more info on iphone x support: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

Let me know if this helps, otherwise maybe we should write a blog about it. Cheers


Hi David,

Give this a read (from the Mendix hybrid app template repository): https://github.com/mendix/hybrid-app-template/blob/master/IPHONEX.md


Hello guys, 

Here is the workaround for the status bar issue. I tested this and it works properly on iPhoneX. 

With this is possible create the .ipa file via PhoneGap. 

<plugin name="cordova-plugin-statusbar" source="npm" spec="https://github.com/timetocodeNL/cordova-plugin-statusbar.git#8b4acd2e56a01cd22a240668d3c269e129764b6b" />