CODEWITHSUNDEEP
htmlmedia-queriesiphone-6iphone-6-plus
Ken Edwards
Ken Edwards

Reputation: 91

Correct Size for apple-touch-startup-image in iPhone 6, iPhone 6 Plus?

Wanting to see if my math and media queries are correct here, as I cannot find this info anywhere.

<!-- iOS 8 iPhone 6 (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">

Upvotes: 4

Views: 5450

Answers (3)

jmarceli
jmarceli

Reputation: 20172

In my case the sizes has to be slightly different, as described in https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o I had to define the following link for iPhone 6s:

<link href="/apple-launch-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Only after that the startup image appears on iPhone 6s.

Upvotes: 0

Joe Orost
Joe Orost

Reputation: 888

I don't have enough reputation to comment, so here is my proposed answer, based on the excellent answer by Adam Smith:

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="1182x2208r.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

Note the 6+ landscape image must be rotated to the right by 90° and must be sized 1182x2208. This is consistent with the landscape startup images for the iPad. If you are a webapp developer and have an iPhone 6+ please test this answer and comment. Thanks!

Upvotes: 0

Adam Smith
Adam Smith

Reputation: 162

Edit: I have removed incorrect information from my post, what you had placed is correct minus the iPhone 6 landscape mode, and swap the width/height for iPhone 6+ landscape.

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

I had previously made a mistake by using startup image sizes the same as the device, and they simply don't show, the correct image sizes must be used.

Upvotes: 9

Related Questions