{"id":276,"date":"2015-01-20T04:00:00","date_gmt":"2015-01-20T04:00:00","guid":{"rendered":"http:\/\/localhost\/?p=276"},"modified":"2017-01-10T16:43:09","modified_gmt":"2017-01-10T16:43:09","slug":"looking-sharp-on-the-iphone-6","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6","title":{"rendered":"Looking Sharp on the iPhone 6"},"content":{"rendered":"

Now that Apple\u2019s new iPhone 6 and 6 Plus are on the scene, developers must consider new screen resolutions when building iOS apps. Ionic\u2019s styles are fully responsive out of the box, so there\u2019s no issue there. However, when testing an app on a shiny new iPhone 6, your app will look slightly blurry by default, displaying at the resolution of the iPhone 5 series and anti-aliasing the difference. That\u2019s wasted pixels! There are two things you must do for your app to display full resolution on the iPhone 6 family of phones.<\/p>\n

<\/p>\n

First, you may need to update the version of Cordova your project uses. The Ionic CLI makes this process a breeze. Simply run the following commands in a terminal window. Note that the first command may require sudo.<\/p>\n

npm update -g ionic cordova\ncd ~\/Development\/myProjectDirectory\nionic platform update ios\n<\/code><\/pre>\n
The next step is to add the appropriate splash screen. XCode will decide whether your app can take advantage of the full iPhone 6 and 6 Plus resolutions, based on whether appropriately sized splash screens have been added to your project. The Cordova update you just installed also includes the ability to specify splash screens via the confix.xml file, like this:<\/p>\n
<platform name="ios">\n    <splash src="pathToImage\/Default-568h@2x~iphone.png" width="640" height="1136"\/>\n    <splash src="pathToImage\/Default-667h.png" width="750" height="1334"\/>\n    <splash src="pathToImage\/Default-736h.png" width="1242" height="2208"\/>\n\u2026\n<\/code><\/pre>\n
The Ionic CLI makes that even simpler. As described in greater detail by Mike Hartington<\/a> in Automating Icons and Splash Screens<\/a>, the new resources<\/code> command makes it easy to create a splash screen. Simply put an image titled \u201csplash\u201d in your project\u2019s resources directory (you may need to create one), and run:<\/p>\n
ionic resources\n<\/code><\/pre>\n
This will automatically create iPhone 6 or 6 Plus-sized splash screens and update your config.xml. If you have images already prepared, just make sure you link to an image titled Default-667h.png<\/code>, with the dimensions 750px by 1334px for the iPhone 6, and Default-736h.png<\/code>, with the dimensions 1242px by 2208px for the iPhone 6+, and that they\u2019ve been added to your project\u2019s config.xml.<\/p>\n
That\u2019s it! Next time you run ionic prepare<\/code>, ionic run<\/code>, or ionic build<\/code>, the splash screens will be applied to your project, and your app can take full advantage of the new screen real estate offered to the new iPhone 6 series phones.<\/p>\n","protected":false},"excerpt":{"rendered":"
Now that Apple\u2019s new iPhone 6 and 6 Plus are on the scene, developers must consider new screen resolutions when building iOS apps. Ionic\u2019s styles are fully responsive out of the box, so there\u2019s no issue there. However, when testing an app on a shiny new iPhone 6, your app will look slightly blurry by […]<\/p>\n","protected":false},"author":7,"featured_media":1651,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nLooking Sharp on the iPhone 6 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Looking Sharp on the iPhone 6\" \/>\n<meta property=\"og:description\" content=\"Now that Apple\u2019s new iPhone 6 and 6 Plus are on the scene, developers must consider new screen resolutions when building iOS apps. Ionic\u2019s styles are fully responsive out of the box, so there\u2019s no issue there. However, when testing an app on a shiny new iPhone 6, your app will look slightly blurry by […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-20T04:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-10T16:43:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Perry Govier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@perrygovier\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Perry Govier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\"},\"author\":{\"name\":\"Perry Govier\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f\"},\"headline\":\"Looking Sharp on the iPhone 6\",\"datePublished\":\"2015-01-20T04:00:00+00:00\",\"dateModified\":\"2017-01-10T16:43:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\"},\"wordCount\":344,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\",\"url\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\",\"name\":\"Looking Sharp on the iPhone 6 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png\",\"datePublished\":\"2015-01-20T04:00:00+00:00\",\"dateModified\":\"2017-01-10T16:43:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png\",\"width\":1400,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Looking Sharp on the iPhone 6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f\",\"name\":\"Perry Govier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g\",\"caption\":\"Perry Govier\"},\"sameAs\":[\"https:\/\/twitter.com\/perrygovier\",\"https:\/\/x.com\/perrygovier\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/perry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Looking Sharp on the iPhone 6 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6","og_locale":"en_US","og_type":"article","og_title":"Looking Sharp on the iPhone 6","og_description":"Now that Apple\u2019s new iPhone 6 and 6 Plus are on the scene, developers must consider new screen resolutions when building iOS apps. Ionic\u2019s styles are fully responsive out of the box, so there\u2019s no issue there. However, when testing an app on a shiny new iPhone 6, your app will look slightly blurry by […]","og_url":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6","og_site_name":"Ionic Blog","article_published_time":"2015-01-20T04:00:00+00:00","article_modified_time":"2017-01-10T16:43:09+00:00","og_image":[{"width":1400,"height":600,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","type":"image\/png"}],"author":"Perry Govier","twitter_card":"summary_large_image","twitter_creator":"@perrygovier","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Perry Govier","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6"},"author":{"name":"Perry Govier","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f"},"headline":"Looking Sharp on the iPhone 6","datePublished":"2015-01-20T04:00:00+00:00","dateModified":"2017-01-10T16:43:09+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6"},"wordCount":344,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6","url":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6","name":"Looking Sharp on the iPhone 6 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","datePublished":"2015-01-20T04:00:00+00:00","dateModified":"2017-01-10T16:43:09+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","width":1400,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/looking-sharp-on-the-iphone-6#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Looking Sharp on the iPhone 6"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f","name":"Perry Govier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g","caption":"Perry Govier"},"sameAs":["https:\/\/twitter.com\/perrygovier","https:\/\/x.com\/perrygovier"],"url":"https:\/\/ionic.io\/blog\/author\/perry"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/01\/iphones-header.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/276\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1651"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}