Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Ken Edwards
Ken Edwards
30 Points

apple-touch-startup-image for iPhone 6

I am looking to add the apple-touch-startup-image for the iPhone 6 and 6 Plus to my web app. I am not 100% sure my numbers are accurate. Is this correct?

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

3 Answers

Matt West
Matt West
14,545 Points
Matt West
Matt West
14,545 Points

Hi Ken,

Apple's documentation specifies the following:

For iPhone 6:
750 x 1334 (@2x) for portrait
1334 x 750 (@2x) for landscape

For iPhone 6 Plus:
1242 x 2208 (@3x) for portrait
2208 x 1242 (@3x) for landscape

The linked page refers specifically to iOS apps, but I believe the same applies to web app startup images.

Ken Edwards
Ken Edwards
30 Points
Ken Edwards
Ken Edwards
30 Points

Not sure if true for native apps, but for web apps you have to take 20 (40 for @2x, 60 for @3x) out. I just wanted to know if my math and media quarries were correct ;)

BTW, this is a great guide for all iPhone sizes.

Thanks, I had not seen that page yet.

Matt West
Matt West
14,545 Points
Matt West
Matt West
14,545 Points

I thought that didn't apply anymore, since iOS7&8 display the startup image underneath the status bar. It's my understanding that removing 20px was to account for the image being pushed under the status bar on older versions of iOS.

Great resource by the way, thanks for sharing :)