iPhone X and Ionic?

Oh - in that case, not sure why its not working. As for the PR, I considered adding the PR branch directly via its git branch URL but then I decided just to copy over that one file manually because I’m pretty sure this will be merged very soon.

BTW, if you are running on a simulator (well, you must be unless you work for Apple or its core partners), try killing it. I just tried this on a v2 project and it just wouldn’t work - till I killed the sim and it worked

About Tabs, don’t know if it’s the right way but I opened an issue, since I guess many people gonna face the problem therefore a solution for everybody could be cool

Also opened an issue about the Navbar/Toolbar height, I think it should be bigger when I compare with native apps

Both of my opened issues about navbar and toolbar size on iPhone X are solved with the ionic nightly build

@fedegarlo as far as I understood, the nightly also solve your question about tabs, with this version there will be space between the content of the tabs and the home button of the iPhone X

1 Like

And for general question about the iPhone X and what to do, the official blog post of Ionic cover it:

https://blog.ionic.io/ios-11-checklist/

P.S.: Note the cordova statusbar PR is marked as merged, hopefully a new version will come soon…

1 Like

The solution for that problem is add in your index.html in tag meta viewport-fit=cover. With this it will cover both as the header as the footer.

did this fix the tabs set to [tabsPlacement=“top”] cause it looks like that might have gotten overlooked…?

To be honest I don’t know. I thought everything was fine but you know shit happens

Maybe you should have a look at the issues list in GitHub of Ionic and if you found none and if you could reproduce it with a minimal project (repo you could provide) you should then open a new issue

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

Please try the following.

So I think I followed this advices, added “, viewport-fit=cover” to the html meta tags like

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

Updated cordova-plugin-ionic-webview to 1.1.16, all ionic and cordova packages and plugins and build a new version for simulator. However: The viewport is still covered by the top and bottom bars?
Am I missing something?
I also made sure the statusbar plugin is up to date, which should handle the top bar as far as I understood, but the app still is covered by it?

ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android ios 4.5.2
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    Node       : v6.10.3
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

9 posts were split to a new topic: iPhone X via Xcode 8, layout problems

I did all the needed updates and added the needed code to meta in index.html, but I still get white space at the bottom of the header before the content section starts. Please see screenshot. Also, it appears like the Title is being cut. I’m using xCode 9.2, WKWebView with Ionic 3.

Here is my meta:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

My HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Saved</ion-title>
  </ion-toolbar>
</ion-header>

My Ionic Info: cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:
cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v8.9.2
npm        : 5.4.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

1 Like

So my problem was that in App.scss I’ve explicitely changed the height of the Toolbar as follows:

.toolbar-background-ios {
background: #ffffff;
height: 70px; //This was the problem
}
By removing the height attribute, all works perfectly well for oth iPhone X and older iPhone 7 plus.

1 Like