{"id":3822,"date":"2017-11-22T17:03:19","date_gmt":"2017-11-22T17:03:19","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3822"},"modified":"2017-11-22T17:04:37","modified_gmt":"2017-11-22T17:04:37","slug":"make-ionic-1-app-look-good-iphone-x","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic\/make-ionic-1-app-look-good-iphone-x\/","title":{"rendered":"How to make Ionic 1 app look good on iPhone X"},"content":{"rendered":"<p>In this post, I&#8217;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).<\/p>\n<h2>TL;DR<\/h2>\n<ul>\n<li>Add the new <code>viewport<\/code> meta tag<\/li>\n<li>Update the status bar plugin<\/li>\n<li>Update the splash screen plugin<\/li>\n<li>Update Ionic to latest 1.x version<\/li>\n<li>Build the app in Xcode 9<\/li>\n<li>Add the new app icon<\/li>\n<\/ul>\n<h2>!TL;DR<\/h2>\n<h3>Add the new <code>viewport<\/code> meta tag<\/h3>\n<p>Add the new <code>viewport<\/code> meta tag to your <code>index.html<\/code> file like this:<\/p>\n<p><code>&lt;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\"&gt;<\/code><\/p>\n<h3>Update the status bar plugin<\/h3>\n<p>Simply remove the plugin and add it back again, but using the GitHub repo (as it may not yet be merged), like this:<\/p>\n<pre><code>ionic plugin rm cordova-plugin-statusbar\nionic plugin add https:\/\/github.com\/apache\/cordova-plugin-statusbar.git\n<\/code><\/pre>\n<h3>Update the splash screen plugin<\/h3>\n<p>Same as with the status bar plugin, you can do the following:<\/p>\n<pre><code>ionic plugin rm cordova-plugin-splashscreen\nionic plugin add cordova-plugin-splashscreen\n<\/code><\/pre>\n<h3>Update Ionic to the latest 1.x version<\/h3>\n<p>Update Ionic to the latest 1.x version (<code>1.3.5<\/code> as of this writing) with the following command:<\/p>\n<p><code>bower install ionic-team\/ionic-bower#1.3.5<\/code><\/p>\n<p>You will be prompted to install some additional packages, and for those packages, you&#8217;ll have to choose the version of Angular you want to use with them. When asked, make sure to choose <code>1.5.3<\/code> (at the time of writing this).<\/p>\n<h3>Build the app in Xcode 9<\/h3>\n<p>Update Xcode to the newest version (<code>9.1<\/code> currently). Execute the <code>ionic prepare ios<\/code> command, and open up the <code>platforms\/ios\/MyApp.xcodeproj<\/code> file using Xcode. If you have a <code>platforms\/ios\/MyApp.xcworkspace<\/code> file in there as well, open that one instead.<\/p>\n<p>\u26a0\ufe0f Now, here&#8217;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 <code>ionic prepare ios<\/code> and open the project in Xcode and update to the new Swift syntax (in case you haven&#8217;t done this before). Then, when you open it up in Xcode 9, you&#8217;ll be able to update to Swift syntax 4. Again, this may only be a potential problem, but I&#8217;m stating it here since I ran into it. The problem is that Xcode 9 can&#8217;t update from Swift 2 to 4 syntax out of the box.<\/p>\n<h3>Add the new app icon<\/h3>\n<p>Finally, please note that for new submissions to the Apple Store, you&#8217;ll need to provide the new 1024&#215;1024 px icon. You can add this image to your Image assets:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/MuRs3Jw.png\" alt=\"\" \/><\/p>\n<p>or you can upload it manually to iTunes when submitting a new version of your app.<\/p>\n<p>Hope this helps someone ?<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to make <a href=\"https:\/\/twitter.com\/hashtag\/Ionic?src=hash&amp;ref_src=twsrc%5Etfw\">#Ionic<\/a> 1 app look good on <a href=\"https:\/\/twitter.com\/hashtag\/iPhone?src=hash&amp;ref_src=twsrc%5Etfw\">#iPhone<\/a> X <a href=\"https:\/\/t.co\/sIh0dwexZW\">https:\/\/t.co\/sIh0dwexZW<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/933380594171564039?ref_src=twsrc%5Etfw\">November 22, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, I&#8217;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&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-3822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3822"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3822\/revisions"}],"predecessor-version":[{"id":3825,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3822\/revisions\/3825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3823"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}