Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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.

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

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 :)