Ionic

How to make Ionic 1 app look good on iPhone X

In this post, I’ll show you how to make your Ionic 1 app look good on iPhone X. The instructions below assume you have the old Ionic CLI (1.x version) and not the new one (3.x version).

TL;DR

  • Add the new viewport meta tag
  • Update the status bar plugin
  • Update the splash screen plugin
  • Update Ionic to latest 1.x version
  • Build the app in Xcode 9
  • Add the new app icon

!TL;DR

Add the new viewport meta tag

Add the new viewport meta tag to your index.html file like this:

<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">

Update the status bar plugin

Simply remove the plugin and add it back again, but using the GitHub repo (as it may not yet be merged), like this:

ionic plugin rm cordova-plugin-statusbar
ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git

Update the splash screen plugin

Same as with the status bar plugin, you can do the following:

ionic plugin rm cordova-plugin-splashscreen
ionic plugin add cordova-plugin-splashscreen

Update Ionic to the latest 1.x version

Update Ionic to the latest 1.x version (1.3.5 as of this writing) with the following command:

bower install ionic-team/ionic-bower#1.3.5

You will be prompted to install some additional packages, and for those packages, you’ll have to choose the version of Angular you want to use with them. When asked, make sure to choose 1.5.3 (at the time of writing this).

Build the app in Xcode 9

Update Xcode to the newest version (9.1 currently). Execute the ionic prepare ios command, and open up the platforms/ios/MyApp.xcodeproj file using Xcode. If you have a platforms/ios/MyApp.xcworkspace file in there as well, open that one instead.

⚠️ Now, here’s a potentially tricky part. Say that you had Xcode 8 till recently and you updated everything as outlined above. Then, just before updating to Xcode 9, you have to do ionic prepare ios and open the project in Xcode and update to the new Swift syntax (in case you haven’t done this before). Then, when you open it up in Xcode 9, you’ll be able to update to Swift syntax 4. Again, this may only be a potential problem, but I’m stating it here since I ran into it. The problem is that Xcode 9 can’t update from Swift 2 to 4 syntax out of the box.

Add the new app icon

Finally, please note that for new submissions to the Apple Store, you’ll need to provide the new 1024×1024 px icon. You can add this image to your Image assets:

or you can upload it manually to iTunes when submitting a new version of your app.

Hope this helps someone ?

Written by Nikola Brežnjak