Supporting iPhone X for mobile web & Cordova app using Onsen UI

Naoki Matagawa
Nov 8, 2017 · 16 min read
Final Output
(Source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/ )

TL;DR


PART I — Creating Native-like Web Apps for iPhone X

Set up a web app

Tab bar pattern (Source: https://developer.apple.com/ios/human-interface-guidelines/bars/tab-bars/ )
# NPM
npm install onsenui vue-onsenui --save-dev# Yarn
yarn add onsenui vue-onsenui -D
import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS importimport VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);
vue init OnsenUI/vue-pwa-webpack # For PWA

App.vue
NotesPage.vue

Problem I —Left/Right Blank Area in Landscape Mode

Tab bar pattern in iPhone X Safari (portrait mode)
Tab bar pattern in iPhone X Safari (landscape mode)

body {
  background-color: black; /* Quick fix for Problem I */
}
In the case that background-color is set to black

Fix Problem I — Controlling the Left/Right Blank Areas

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

Problem II — Page Contents Hidden by the Obstacles

The notch, the rounded corners and the bottom bar are hiding some part of the page contents

Fix Problem II

We must set margin and padding so that texts and figures don’t go into the red area

@media screen and (orientation: landscape) {
  .some-box {
    padding-left: 44px;
    padding-right: 44px;
  }
}

Understanding Safe Area

Landscape safe area (Source: https://developer.apple.com/ios/update-apps-for-iphone-x/ )

Using iPhone X Support Helper by UI Libraries

After adding onsflag-iphonex-landscape attribute to the html element
beforeMount() {
  const html = document.documentElement;
  if (this.$ons.platform.isIPhoneX()) {
    html.setAttribute('onsflag-iphonex-landscape', '');
  }
},

Summary of PART I


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

Set up a Cordova app

# NPM
npm install onsenui vue-onsenui --save-dev# Yarn
yarn add onsenui vue-onsenui -D
import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS importimport VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);
vue init OnsenUI/vue-cordova-webpack # For Cordova apps
App.vue
NotesPage.vue

How about Problem I?

cordova platform add ios
npm run build && cordova run ios --target="iPhone-X"
Tab bar pattern in iPhone X WebView (portrait mode)
Tab bar pattern in iPhone X WebView (landscape mode)
<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

Problem III

Cordova app after Problem I is solved (portrait mode)
Cordova app after Problem I is solved (landscape mode)
cordova plugin add cordova-plugin-splashscreen
<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" />
Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)(Please save the images into res/screen/ios/)

Cordova app shown in full screen (portrait mode)
Cordova app shown in full screen (landscape mode)

Fix Problem II


beforeMount() {
  const html = document.documentElement;
  if (this.$ons.platform.isIPhoneX()) {
    html.setAttribute('onsflag-iphonex-portrait', '');
    html.setAttribute('onsflag-iphonex-landscape', '');
  }
}
After enabling the patch CSS (portrait mode)
After enabling the patch CSS (landscape mode)

Summary of PART II


How v-ons-action-sheet and v-ons-navigator work
Example of iOS-like page transition (Source: https://github.com/asial-matagawa/vue-onsenui-cordova-iphonex )

Conclusion

What’s next

References

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Naoki Matagawa

Written by

Software Engineer @Onsen_UI

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.