In PART I, we mentioned the case of web apps.

But I think some of you are creating Cordova apps with the Cordova toolkit or Monaca. So I’d like to explain how to make your Cordova app compatible with iPhone X.

PART II — Creating Native-like Apps with Cordova for iPhone X

In the case of Cordova app, supporting iPhone X means supporting iPhone X WebView.

So let’s see what happens if we show Cordova apps in iPhone X WebView in the same way as PART I.

Set up a Cordova app

Let’s create a Cordova app with Vue.

The versions of software which we’ll use are shown below:

vue@2.5.2

onsenui@2.7.0 (Core package)

(Core package) vue-onsenui@2.3.0 (Additional package for Vue)

(Additional package for Vue) cordova@7.1.0

cordova-ios@4.5.3

Xcode 9.0

(1) For existing Cordova + Vue projects, it can be installed with NPM or Yarn:

# NPM

npm install onsenui vue-onsenui --save-dev # Yarn

yarn add onsenui vue-onsenui -D

Some necessary files must be included in the app:

import 'onsenui/css/onsenui.css'; // Webpack CSS import

import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import import VueOnsen from 'vue-onsenui';

Vue.use(VueOnsen);

(2) Otherwise, new projects can be started right away via Vue CLI. It can optionally add Vuex and some other features:

vue init OnsenUI/vue-cordova-webpack # For Cordova apps

(3) After setting up Cordova, Vue and OnsenUI, let’s create App.vue and NotesPage.vue with the following content as same as PART I and get the tab bar pattern implemented.

App.vue

NotesPage.vue

That’s it.

How about Problem I?

In PART I, we explained Problem I — white blank areas are automatically inserted on the both side by iPhone X Safari.

So let’s check if Problem I remains or not in iPhone X WebView.

cordova platform add ios

npm run build && cordova run ios --target="iPhone-X"

Tab bar pattern in iPhone X WebView (portrait mode)

Oh, in the case of Cordova apps, it seems that the blank areas appear even in portrait mode.

Then, what happens in landscape mode?

Tab bar pattern in iPhone X WebView (landscape mode)

Blank areas appeared on the left, right and bottom side in landscape mode.

It turned out that Problem I still happens in Cordova apps. But as same as PART I, this problem can be fixed by just setting viewport-fit to cover .

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

After setting the value of viewport-fit to cover

Tip: Problem I is already fixed in WKWebView iOS 11 has two WebViews: an old UIWebView (Cordova default, and not recommended by Apple) and a new WKWebView (recommended by Apple). In UIWebView, because auto of the viewport-fit points to contain , we have to change it to cover . But in WKWebView, auto points to cover by default (confirmed by the author). It means that Problem I is already fixed in WKWebView and we no longer have to set viewport-fit=cover . As WKWebView is a next-generation API, basically it works stably compared to UIWebView in several situations. If you are using Cordova, I recommend replacing UIWebView with WKWebView by using cordova-plugin-wkwebview-engine plugin. But please also keep in mind that WKWebView has some minor drawbacks.

Problem III

In the case of web apps, once Problem I is fixed, we can start working on Problem II — the notch, the rounded corners and the bottom bar can hide some part of the page contents.

But in the case of Cordova apps, even if Problem I is fixed we cannot work on Problem II right away, because there is another problem, Problem III.

Let’s see what is happening in the whole screen after Problem I is solved.

Cordova app after Problem I is solved (portrait mode)

Cordova app after Problem I is solved (landscape mode)

There are black blank areas, in the top/bottom in portrait mode, and in the left/right and bottom in landscape mode. This is what I call Problem III.

Similar to Problem I, but the principle behind the problem is different. Problem III is caused by the specification of iPhone X that all apps which don’t satisfy a particular condition are automatically shown in the safe area. The condition is explained as follows:

Enable full screen native resolution. Your app will run in Full Screen Display Mode on iPhone X if your project’s base SDK is set to iOS 11 and you have a Launch Storyboard or iPhone X launch image. (Source: https://developer.apple.com/ios/update-apps-for-iphone-x/ )

I’d like to explain the quoted part more specifically. First of all, iOS has two methods to show splash screens: (1) an old method which simply shows an image (Cordova default, not recommended by Apple) and (2) a new method which shows an image with some stretching and trimming based on a mechanism called storyboard (recommended by Apple).

In the case of (1), if the Cordova app does not contain an image which size is same as the iPhone X screen resolution (1125 x 2436 px), the app will be shown in the safe area. Adding the image with 1125 x 2436 px size fixes this problem and the app will be shown in full screen.

In the case of (2), all Cordova apps will be shown in full screen.

But in order to use (2), we have to add cordova-plugin-splashscreen plugin into the Cordova app using the following command:

cordova plugin add cordova-plugin-splashscreen

And also the images which the splash screen consists of must be defined in <platform name="ios"> of config.xml :

<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />

<splash src="res/screen/ios/Default@2x~iphone~comany.png" />

<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />

<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />

<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />

<splash src="res/screen/ios/Default@3x~iphone~comany.png" />

<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />

<splash src="res/screen/ios/Default@2x~ipad~comany.png" />

Of course the actual image files must be added. The size of each image should basically follow the document of cordova-plugin-splashscreen , and only for devices with Super Retina screen ( @3x ) which has 3x resolution, I recommend setting the image size to 2436 x 1242 px so that it covers the longest long side of iPhone X (2436px) and the longest short side of iPhone 8 Plus (1242px). Please note that in the case of (2), apps are always shown in full screen and the size of each image only affects the behavior of the splash screen and does not affect the size of the app.