iPhone X and Ionic?

Ionic Framework ionic-v3
32

Please follow this approach, which works for me and tested in ionic 1 and ionic 3.

For a manual fix to an existing cordova project

index.html

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

resources/ios/splash

Create Image named 'Default-812h@3x.png' and place in the mentioned path. Resolution 1125 × 2436.

config.xml

<splash height="2436" src="resources/ios/splash/Default-812h@3x.png" width="1125" />

info.plist

    <dict>
        <key>UILaunchImageMinimumOSVersion</key>
        <string>8.0</string>
        <key>UILaunchImageName</key>
        <string>Default-812h</string>
        <key>UILaunchImageOrientation</key>
        <string>Portrait</string>
        <key>UILaunchImageSize</key>
        <string>{375, 812}</string>
    </dict>

plugins/cordova-plugin-splashscreen
CDVSplashScreen.h

typedef struct {
 BOOL iPhone;
 BOOL iPad;
 BOOL iPhone4;
 BOOL iPhone5;
 BOOL iPhone6;
 BOOL iPhone6Plus;
 BOOL retina;
 BOOL iPhoneX;
} CDV_iOSDevice;

CDVSplashScreen.m

add line no. 177

device.iPhoneX = (device.iPhone && limit == 812.0);

add line no. 241

else if (device.iPhoneX)
{ // does not support landscape
    imageName = [imageName stringByAppendingString:@"-812h"];
}
2 Likes