Create a gist now

Instantly share code, notes, and snippets.

@tfausak /ios-8-web-app.html
Last active Jul 18, 2018

Embed
What would you like to do?
Download ZIP
iOS 8 web app http://taylor.fausak.me/2015/01/27/ios-8-web-apps/
Raw
ios-8-web-app.html
<!doctype html>
<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->
<html>
<head>
<title>iOS 8 web app</title>
<!-- CONFIGURATION -->
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
<!-- Make the app title different than the page title. -->
<meta name="apple-mobile-web-app-title"
content="iOS 8 web app">
<!-- Configure the status bar. -->
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<!-- Set the viewport. -->
<meta name="viewport"
content="initial-scale=1">
<!-- Disable automatic phone number detection. -->
<meta name="format-detection"
content="telephone=no">
<!-- ICONS -->
<!-- iPad retina icon -->
<link href="https://placehold.it/152"
sizes="152x152"
rel="apple-touch-icon-precomposed">
<!-- iPad retina icon (iOS < 7) -->
<link href="https://placehold.it/144"
sizes="144x144"
rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon -->
<link href="https://placehold.it/76"
sizes="76x76"
rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon (iOS < 7) -->
<link href="https://placehold.it/72"
sizes="72x72"
rel="apple-touch-icon-precomposed">
<!-- iPhone 6 Plus icon -->
<link href="https://placehold.it/180"
sizes="120x120"
rel="apple-touch-icon-precomposed">
<!-- iPhone retina icon (iOS < 7) -->
<link href="https://placehold.it/114"
sizes="114x114"
rel="apple-touch-icon-precomposed">
<!-- iPhone non-retina icon (iOS < 7) -->
<link href="https://placehold.it/57"
sizes="57x57"
rel="apple-touch-icon-precomposed">
<!-- STARTUP IMAGES -->
<!-- iPad retina portrait startup image -->
<link href="https://placehold.it/1536x2008"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!-- iPad retina landscape startup image -->
<link href="https://placehold.it/1496x2048"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!-- iPad non-retina portrait startup image -->
<link href="https://placehold.it/768x1004"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 1)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!-- iPad non-retina landscape startup image -->
<link href="https://placehold.it/748x1024"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 1)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!-- iPhone 6 Plus portrait startup image -->
<link href="https://placehold.it/1242x2148"
media="(device-width: 414px) and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!-- iPhone 6 Plus landscape startup image -->
<link href="https://placehold.it/1182x2208"
media="(device-width: 414px) and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!-- iPhone 6 startup image -->
<link href="https://placehold.it/750x1294"
media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 startup image -->
<link href="https://placehold.it/640x1096"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone < 5 retina startup image -->
<link href="https://placehold.it/640x920"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone < 5 non-retina startup image -->
<link href="https://placehold.it/320x460"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- HACKS -->
<!-- Prevent text size change on orientation change. -->
<style>
html {
-webkit-text-size-adjust: 100%;
}
</style>
</head>
<body>
<h1>iOS 8 web app</h1>
</body>
</html>
@PhoneGapDev

This comment has been minimized.

Show comment
Hide comment
@PhoneGapDev

PhoneGapDev Jun 19, 2012

Hi... Budy,

i was catching my hair to solve this problem ....
But i got solution form this website ....
Very very thank you ...

PhoneGapDev commented Jun 19, 2012

Hi... Budy,

i was catching my hair to solve this problem ....
But i got solution form this website ....
Very very thank you ...
@gwilson

This comment has been minimized.

Show comment
Hide comment
@gwilson

gwilson Aug 13, 2012

The above doesn't work with iPad retina. The device-width needs to be 768 for both retina and non-retina. The -webkit-device-pixel-ratio: 2 will detect the retina. The image sizes should still be as they are above (1536x2008 and 1496x2048). Thanks for this!

gwilson commented Aug 13, 2012

The above doesn't work with iPad retina. The device-width needs to be 768 for both retina and non-retina. The -webkit-device-pixel-ratio: 2 will detect the retina. The image sizes should still be as they are above (1536x2008 and 1496x2048). Thanks for this!
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Sep 20, 2012

Good catch, @gwilson. I've updated it to fix that.

I also added support for the iPhone 5.
Owner

tfausak commented Sep 20, 2012

Good catch, @gwilson. I've updated it to fix that.

I also added support for the iPhone 5.
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Sep 22, 2012

A note on viewports with respect to the iPhone 5: Web apps can be letterboxed, but only if their viewport’s width is set to either device-width or 320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0. (Thanks to Max Firtman for this solution.)

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">
Owner

tfausak commented Sep 22, 2012

A note on viewports with respect to the iPhone 5: Web apps can be letterboxed, but only if their viewport’s width is set to either device-width or 320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0. (Thanks to Max Firtman for this solution.)

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">
@perqa

This comment has been minimized.

Show comment
Hide comment
@perqa

perqa Sep 27, 2012

This is incredibly useful! What a time-saver! Much better than Apple's own documentation... ;-)

perqa commented Sep 27, 2012

This is incredibly useful! What a time-saver! Much better than Apple's own documentation... ;-)
@franz-josef-kaiser

This comment has been minimized.

Show comment
Hide comment
@franz-josef-kaiser

franz-josef-kaiser Oct 8, 2012

To target the Safari mobile toolbar:

<meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />

franz-josef-kaiser commented Oct 8, 2012

To target the Safari mobile toolbar:

<meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
@nhoizey

This comment has been minimized.

Show comment
Hide comment
@nhoizey

nhoizey Nov 20, 2012

Thanks, it's really helpful!

nhoizey commented Nov 20, 2012

Thanks, it's really helpful!
@coldes

This comment has been minimized.

Show comment
Hide comment
@coldes

coldes Nov 27, 2012

Brilliant, finally someone has the answers - THANK YOU! - iPhone 5 now full screen, no letterbox

FYI, I was using "target-densitydpi=device-dpi" for an android 480x800 along with css media queries, however with adding the above made webapp content on Android very small, so removed, Android phone is now being controlled by iPhone 4 css:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { etc} for PORTRAIT
and
@media screen and (max-device-height: 479px) and (orientation: landscape){ etc} for LANDSCAPE

Might be of interest to someone...

go figure!...

coldes commented Nov 27, 2012

Brilliant, finally someone has the answers - THANK YOU! - iPhone 5 now full screen, no letterbox

FYI, I was using "target-densitydpi=device-dpi" for an android 480x800 along with css media queries, however with adding the above made webapp content on Android very small, so removed, Android phone is now being controlled by iPhone 4 css:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { etc} for PORTRAIT
and
@media screen and (max-device-height: 479px) and (orientation: landscape){ etc} for LANDSCAPE

Might be of interest to someone...

go figure!...
@walterrenner

This comment has been minimized.

Show comment
Hide comment
@walterrenner

walterrenner Nov 30, 2012

thanks for that! really useful!

walterrenner commented Nov 30, 2012

thanks for that! really useful!
@BernardTeske

This comment has been minimized.

Show comment
Hide comment
@BernardTeske

BernardTeske Dec 9, 2012

Wonderful. I sent you a tip. You can get it at flattr.com

BernardTeske commented Dec 9, 2012

Wonderful. I sent you a tip. You can get it at flattr.com
@themorgantown

This comment has been minimized.

Show comment
Hide comment
@themorgantown

themorgantown Dec 12, 2012

Thanks!

themorgantown commented Dec 12, 2012

Thanks!
@martinkool

This comment has been minimized.

Show comment
Hide comment
@martinkool

martinkool Jan 4, 2013

Can you explain why the size of the iPhone 5 launch screen is 640x1096 and not 640x1136? Just curious!
Thanks for taking the time to share this with us.

martinkool commented Jan 4, 2013

Can you explain why the size of the iPhone 5 launch screen is 640x1096 and not 640x1136? Just curious!
Thanks for taking the time to share this with us.
@markrummel

This comment has been minimized.

Show comment
Hide comment
@markrummel

markrummel Jan 5, 2013

@martinkool The 40 pixel difference is the status bar at the top.

markrummel commented Jan 5, 2013

@martinkool The 40 pixel difference is the status bar at the top.
@ldidomen

This comment has been minimized.

Show comment
Hide comment
@ldidomen

ldidomen Feb 18, 2013

Hi!

Thanks a lot for your script!

ldidomen commented Feb 18, 2013

Hi!

Thanks a lot for your script!
@dansteidl

This comment has been minimized.

Show comment
Hide comment
@dansteidl

dansteidl Feb 19, 2013

does anyone have the resolutions for the newer iPad mini?

EDIT: same resolution as iPad 2, nothing else needed.

dansteidl commented Feb 19, 2013

does anyone have the resolutions for the newer iPad mini?

EDIT: same resolution as iPad 2, nothing else needed.
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Feb 27, 2013

Tested and works on iPhone4s, iPad mini, iPad, iPhone 5, iPod5.
However the splash-screen (startup image) doesn't work on iPad Retina, iPhone3 and iPod Touch.

    <!-- Application name -->
    <title>iOS Webapp</title>

    <!-- Viewport configuration -->

    <!-- Letterboxed on iPhone 5 -->
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=320">
    <!-- Not letterboxed on iPhone 5 -->
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="viewport" content="width=320.1">

    <!-- Webapp capable config -->
    <meta content="yes" name="apple-mobile-web-app-capable"/>

    <!-- Statusbar style -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->

    <!-- Touch icons -->

    <!-- Note: For disabling effects, add precomposed. For example: rel="apple-touch-icon-precomposed" -->

    <!-- iPhone -->
    <link rel="apple-touch-icon" sizes="57x57" href="img/Icon.png"/>
    <!-- iPad -->
    <link rel="apple-touch-icon" sizes="72x72" href="img/Icon@2x.png"/>
    <!-- iPhone Retina -->
    <link rel="apple-touch-icon" sizes="114x114" href="img/Icon-72.png"/>
    <!-- iPad Retina -->
    <link rel="apple-touch-icon" sizes="144x144" href="img/Icon-72@2x.png"/>

    <!-- Startup images -->

    <!-- iPhone - iPod touch - 320x460 -->
    <!--<link rel="apple-touch-startup-image" href="/startup.png">-->
    <link href="img/Default.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPhone - iPod (Retina) - 640x920 -->
    <link href="img/Default@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 - iPod 5 (Retina) - 640x1096 -->
    <link href="img/Default-568h@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) - 768x1004 -->
    <link href="img/Default-Portrait~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) - 1024x748 -->
    <link href="img/Default-Landscape~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) - 1536x2008 -->
    <link href="img/Default-Portrait@2x~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) - 1496x2048 -->
    <link href="img/Default-Landscape@2x~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

ghost commented Feb 27, 2013

Tested and works on iPhone4s, iPad mini, iPad, iPhone 5, iPod5.
However the splash-screen (startup image) doesn't work on iPad Retina, iPhone3 and iPod Touch.

    <!-- Application name -->
    <title>iOS Webapp</title>

    <!-- Viewport configuration -->

    <!-- Letterboxed on iPhone 5 -->
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=320">
    <!-- Not letterboxed on iPhone 5 -->
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="viewport" content="width=320.1">

    <!-- Webapp capable config -->
    <meta content="yes" name="apple-mobile-web-app-capable"/>

    <!-- Statusbar style -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->

    <!-- Touch icons -->

    <!-- Note: For disabling effects, add precomposed. For example: rel="apple-touch-icon-precomposed" -->

    <!-- iPhone -->
    <link rel="apple-touch-icon" sizes="57x57" href="img/Icon.png"/>
    <!-- iPad -->
    <link rel="apple-touch-icon" sizes="72x72" href="img/Icon@2x.png"/>
    <!-- iPhone Retina -->
    <link rel="apple-touch-icon" sizes="114x114" href="img/Icon-72.png"/>
    <!-- iPad Retina -->
    <link rel="apple-touch-icon" sizes="144x144" href="img/Icon-72@2x.png"/>

    <!-- Startup images -->

    <!-- iPhone - iPod touch - 320x460 -->
    <!--<link rel="apple-touch-startup-image" href="/startup.png">-->
    <link href="img/Default.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPhone - iPod (Retina) - 640x920 -->
    <link href="img/Default@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 - iPod 5 (Retina) - 640x1096 -->
    <link href="img/Default-568h@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) - 768x1004 -->
    <link href="img/Default-Portrait~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) - 1024x748 -->
    <link href="img/Default-Landscape~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) - 1536x2008 -->
    <link href="img/Default-Portrait@2x~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) - 1496x2048 -->
    <link href="img/Default-Landscape@2x~ipad.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
@ChrisLang

This comment has been minimized.

Show comment
Hide comment
@ChrisLang

ChrisLang Mar 25, 2013

Thanks this is awesome! very nicely documented!

@ GertBoers - I also noticed that the apple-touch-startup-image didnt work on an iphone 3, just make sure the iphone3 snippet loads last! like below...

Don't ask me why the order matters, it just does! :/

I have the following and it works on the iPhone 3, iPhone 4, iPhone 5 and the iPad in landscape and portrait (excluding the iPad 3) which we currently don't support

    <!-- iPad landscape -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-landscape.jpg")" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: landscape) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPad portrait -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-portrait.jpg" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: portrait) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone5-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 568px) 
            and (-webkit-device-pixel-ratio: 2)">
    <!-- iPhone (Retina) -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone4-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-min-device-pixel-ratio: 2)" />
    <!-- iPhone -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-device-pixel-ratio: 1)" />

ChrisLang commented Mar 25, 2013

Thanks this is awesome! very nicely documented!

@ GertBoers - I also noticed that the apple-touch-startup-image didnt work on an iphone 3, just make sure the iphone3 snippet loads last! like below...

Don't ask me why the order matters, it just does! :/

I have the following and it works on the iPhone 3, iPhone 4, iPhone 5 and the iPad in landscape and portrait (excluding the iPad 3) which we currently don't support

    <!-- iPad landscape -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-landscape.jpg")" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: landscape) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPad portrait -->
    <link rel="apple-touch-startup-image" 
            href="images/ipad-portrait.jpg" 
            media="(device-width: 768px) 
            and (device-height: 1024px) 
            and (orientation: portrait) 
            and (-webkit-device-pixel-ratio: 1)" />
    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone5-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 568px) 
            and (-webkit-device-pixel-ratio: 2)">
    <!-- iPhone (Retina) -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone4-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-min-device-pixel-ratio: 2)" />
    <!-- iPhone -->
    <link rel="apple-touch-startup-image" 
            href="images/iphone-portrait.jpg" 
            media="(device-width: 320px) 
            and (device-height: 480px) 
            and (-webkit-device-pixel-ratio: 1)" />
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Apr 11, 2013

Good find, @GertBoers and @ChrisLang! I only tested iOS 6 devices in the simulator so I didn't discover the bug with the iPhone 3G. I'm surprised that it behaves this way, since I expected it to use the first apple-touch-startup-image it encounters, not the last.

Also, both of you claim that the new iPad doesn't show the startup images. However it works fine for me both in the simulator and on a physical device.
Owner

tfausak commented Apr 11, 2013

Good find, @GertBoers and @ChrisLang! I only tested iOS 6 devices in the simulator so I didn't discover the bug with the iPhone 3G. I'm surprised that it behaves this way, since I expected it to use the first apple-touch-startup-image it encounters, not the last.

Also, both of you claim that the new iPad doesn't show the startup images. However it works fine for me both in the simulator and on a physical device.
@uschmelzer

This comment has been minimized.

Show comment
Hide comment
@uschmelzer

uschmelzer May 17, 2013

Hi,

maybe you want to add this tag, too?
It seems to work in IOS 6

TAG
<meta name="apple-mobile-web-app-title" content="My App Name">

PURPOSE
IOS Shorter App title for homescreen
-Available as of IOS6
-Undocumented, thus, throws (ignorable) errors in W3C Validator (as of MAY-2013)
-Max. 13 chars

LINKS
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
http://stackoverflow.com/questions/4883795/what-can-i-do-to-prevent-iphone-4-from-cutting-off-my-title-when-adding-to-home

Cheers
uwe

uschmelzer commented May 17, 2013

Hi,

maybe you want to add this tag, too?
It seems to work in IOS 6

TAG
<meta name="apple-mobile-web-app-title" content="My App Name">

PURPOSE
IOS Shorter App title for homescreen
-Available as of IOS6
-Undocumented, thus, throws (ignorable) errors in W3C Validator (as of MAY-2013)
-Max. 13 chars

LINKS
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
http://stackoverflow.com/questions/4883795/what-can-i-do-to-prevent-iphone-4-from-cutting-off-my-title-when-adding-to-home

Cheers
uwe
@SebastianLopienski

This comment has been minimized.

Show comment
Hide comment
@SebastianLopienski

SebastianLopienski Jun 12, 2013

Very useful, thanks a lot!

SebastianLopienski commented Jun 12, 2013

Very useful, thanks a lot!
@muzzamo

This comment has been minimized.

Show comment
Hide comment
@muzzamo

muzzamo Jul 11, 2013

The only problem with this solution is that the filenames you have used are confusing.
eg:

apple-touch-startup-image-640x920.png
apple-touch-startup-image-640x1096.png

the width and height you have used doesn't follow the X * Y convention. Which is width and which is height?

muzzamo commented Jul 11, 2013

The only problem with this solution is that the filenames you have used are confusing.
eg:

apple-touch-startup-image-640x920.png
apple-touch-startup-image-640x1096.png

the width and height you have used doesn't follow the X * Y convention. Which is width and which is height?
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jul 17, 2013

All the files I use have width x height in their filenames. For example, apple-touch-startup-image-640x1096.png is 640 pixels wide (320 @ 2x) and 1096 pixels tall (568 - 20 @ 2x). That one's for the iPhone 5. Similarly, apple-touch-startup-image-640x920.png is for the iPhone 4(S) and is 640 pixels wide by 920 pixels tall.
Owner

tfausak commented Jul 17, 2013

All the files I use have width x height in their filenames. For example, apple-touch-startup-image-640x1096.png is 640 pixels wide (320 @ 2x) and 1096 pixels tall (568 - 20 @ 2x). That one's for the iPhone 5. Similarly, apple-touch-startup-image-640x920.png is for the iPhone 4(S) and is 640 pixels wide by 920 pixels tall.
@studiopersona

This comment has been minimized.

Show comment
Hide comment
@studiopersona

studiopersona Aug 24, 2013

This is great except that it has no viewport scaling. Once you add in a meta tag for the viewport the downloaded version of the app is letterboxed. This happens even if I add no content like so: <meta name="viewport" content="" />

studiopersona commented Aug 24, 2013

This is great except that it has no viewport scaling. Once you add in a meta tag for the viewport the downloaded version of the app is letterboxed. This happens even if I add no content like so: <meta name="viewport" content="" />
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Aug 27, 2013

@studiopersona: Check out my comment from almost a year ago. You'll want one of these:

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">

I considered adding the rest of the <meta> tags that Mobile Safari supports, but I want to keep this Gist focused on the icons and startup images.
Owner

tfausak commented Aug 27, 2013

@studiopersona: Check out my comment from almost a year ago. You'll want one of these:

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">

I considered adding the rest of the <meta> tags that Mobile Safari supports, but I want to keep this Gist focused on the icons and startup images.
@mbhatton

This comment has been minimized.

Show comment
Hide comment
@mbhatton

mbhatton Aug 28, 2013

Hi,

I'm pretty sure line 58 is wrong. It is a landscape resolution with a portrait image:

    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

It rendered wrong for me anyway so I changed mine to this and it worked

    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-2048x1496.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

Seems to be in line with https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14

mbhatton commented Aug 28, 2013

Hi,

I'm pretty sure line 58 is wrong. It is a landscape resolution with a portrait image:

    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

It rendered wrong for me anyway so I changed mine to this and it worked

    <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-2048x1496.png"
          media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

Seems to be in line with https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Aug 28, 2013

@mbhatton: That documentation is for native apps. Apple doesn't provide any official documentation for startup images on iPads. To quote my own post:

Note that landscape images are not actually defined as such — they’re taller than they are wide. When you’re creating your assets, make them as landscape images. Then, when you’re ready to publish, rotate them 90° clockwise.
Owner

tfausak commented Aug 28, 2013

@mbhatton: That documentation is for native apps. Apple doesn't provide any official documentation for startup images on iPads. To quote my own post:

Note that landscape images are not actually defined as such — they’re taller than they are wide. When you’re creating your assets, make them as landscape images. Then, when you’re ready to publish, rotate them 90° clockwise.
@sahilkhosla

This comment has been minimized.

Show comment
Hide comment
@sahilkhosla

sahilkhosla Oct 9, 2013

Any idea how why is the launch image flickering on iOS7? It seems like that it is first stretched all the way to 1136px, then status bar appears and the launch images goes to its actual height of 1096px, resulting in a slight flicker.

sahilkhosla commented Oct 9, 2013

Any idea how why is the launch image flickering on iOS7? It seems like that it is first stretched all the way to 1136px, then status bar appears and the launch images goes to its actual height of 1096px, resulting in a slight flicker.
@scottopolis

This comment has been minimized.

Show comment
Hide comment
@scottopolis

scottopolis Oct 10, 2013

I'm seeing the same thing as @sahilkhosla. The startup image is stretched to cover the taskbar at the top, then it jumps down and the taskbar is revealed. Any idea how to fix?

scottopolis commented Oct 10, 2013

I'm seeing the same thing as @sahilkhosla. The startup image is stretched to cover the taskbar at the top, then it jumps down and the taskbar is revealed. Any idea how to fix?
@patriotbg

This comment has been minimized.

Show comment
Hide comment
@patriotbg

patriotbg Oct 14, 2013

I have the same problem as @sahilkhosla and @scottopolis. Is anybody have a workaround ?

patriotbg commented Oct 14, 2013

I have the same problem as @sahilkhosla and @scottopolis. Is anybody have a workaround ?
@asantos

This comment has been minimized.

Show comment
Hide comment
@asantos

asantos Oct 18, 2013

@tfausak do you know why landscape images are meant to be in portrait mode?

asantos commented Oct 18, 2013

@tfausak do you know why landscape images are meant to be in portrait mode?
@davidpich

This comment has been minimized.

Show comment
Hide comment
@davidpich

davidpich Oct 23, 2013

Thanks so much! very useful! What a time-saver! :)

davidpich commented Oct 23, 2013

Thanks so much! very useful! What a time-saver! :)
@jjb

This comment has been minimized.

Show comment
Hide comment
@jjb

jjb Oct 24, 2013

epic.

jjb commented Oct 24, 2013

epic.
@simonjking

This comment has been minimized.

Show comment
Hide comment
@simonjking

simonjking Oct 25, 2013

Same problem as @sahilkhosla and @scottopolis and @patriotbg. Will post if I find a solution.

simonjking commented Oct 25, 2013

Same problem as @sahilkhosla and @scottopolis and @patriotbg. Will post if I find a solution.
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Oct 31, 2013

I updated this to support iOS 7.

@sahilkhosla, @scottopolis, @patriotbg, and @simonjking: There is no way to avoid the flickering. iOS 7 initially stretches the startup image to cover the entire screen. Then when the status bar shows up it renders the startup image at its actual size. If, for example, you specify a 640x1136 startup image (for an iPhone 5 or 5S running iOS 7), it will ignore it because it's not the dimensions it expects.
Owner

tfausak commented Oct 31, 2013

I updated this to support iOS 7.

@sahilkhosla, @scottopolis, @patriotbg, and @simonjking: There is no way to avoid the flickering. iOS 7 initially stretches the startup image to cover the entire screen. Then when the status bar shows up it renders the startup image at its actual size. If, for example, you specify a 640x1136 startup image (for an iPhone 5 or 5S running iOS 7), it will ignore it because it's not the dimensions it expects.
@bhays

This comment has been minimized.

Show comment
Hide comment
@bhays

bhays Dec 6, 2013

The current setup for startup images is excluding iPhone 5s. Have tried adjusting the device-width & device-height of the 'iOS 6 & 7 iPhone 5' startup image with no success. Anyone else been able to get a startup image to show in a 5s?

bhays commented Dec 6, 2013

The current setup for startup images is excluding iPhone 5s. Have tried adjusting the device-width & device-height of the 'iOS 6 & 7 iPhone 5' startup image with no success. Anyone else been able to get a startup image to show in a 5s?
@hamecoded

This comment has been minimized.

Show comment
Hide comment
@hamecoded

hamecoded Jan 24, 2014

@bhays I second you, on 5s I got all my startup images loaded one ontop the other, weird?!

hamecoded commented Jan 24, 2014

@bhays I second you, on 5s I got all my startup images loaded one ontop the other, weird?!
@ajagelund

This comment has been minimized.

Show comment
Hide comment
@ajagelund

ajagelund Feb 11, 2014

Brilliant work!

ajagelund commented Feb 11, 2014

Brilliant work!
@myorangeca

This comment has been minimized.

Show comment
Hide comment
@myorangeca

myorangeca Feb 11, 2014

Ios icon generator for all resolutions:

http://iconogen.com/

myorangeca commented Feb 11, 2014

Ios icon generator for all resolutions:

http://iconogen.com/
@frank-laemmer

This comment has been minimized.

Show comment
Hide comment
@frank-laemmer

frank-laemmer Feb 17, 2014

sorry for the stupid question: is there a way to only deliver one (the largest) image size, so that the (i)Os does the crunching? i am lazy and don't want to export X images all the time, also my html head looks spammed with images.

frank-laemmer commented Feb 17, 2014

sorry for the stupid question: is there a way to only deliver one (the largest) image size, so that the (i)Os does the crunching? i am lazy and don't want to export X images all the time, also my html head looks spammed with images.
@Bonxy

This comment has been minimized.

Show comment
Hide comment
@Bonxy

Bonxy Mar 25, 2014

Thanks for the guide.

Bonxy commented Mar 25, 2014

Thanks for the guide.
@harryrichardson

This comment has been minimized.

Show comment
Hide comment
@harryrichardson

harryrichardson Apr 28, 2014

Same problem as @sahilkhosla, @scottopolis, @patriotbg and @simonjking. Did anyone find a workaround? The jumpy/stretch bug makes the startup screen almost pointless to use from an aesthetic point of view.

harryrichardson commented Apr 28, 2014

Same problem as @sahilkhosla, @scottopolis, @patriotbg and @simonjking. Did anyone find a workaround? The jumpy/stretch bug makes the startup screen almost pointless to use from an aesthetic point of view.
@hendronf

This comment has been minimized.

Show comment
Hide comment
@hendronf

hendronf May 6, 2014

Line 79 should read 1024 not 1004

hendronf commented May 6, 2014

Line 79 should read 1024 not 1004
@deCastongrene

This comment has been minimized.

Show comment
Hide comment
@deCastongrene

deCastongrene May 14, 2014

@hendronf Remember to subtract 20 or 40 pxs for the status bar

deCastongrene commented May 14, 2014

@hendronf Remember to subtract 20 or 40 pxs for the status bar
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 23, 2014

@tfausak thanks for this.

All work for me except for the iOS 6 iPhone (320x480). I just get a white screen. I've been playing around with it for a while and haven't figured it out yet. I use an iPod Touch 4th Gen and therefore still use iOS 6. I get the same result, white screen, using iOS simulator (iOS 7) for a iPhone 3.5 inch retina.

ghost commented May 23, 2014

@tfausak thanks for this.

All work for me except for the iOS 6 iPhone (320x480). I just get a white screen. I've been playing around with it for a while and haven't figured it out yet. I use an iPod Touch 4th Gen and therefore still use iOS 6. I get the same result, white screen, using iOS simulator (iOS 7) for a iPhone 3.5 inch retina.
@eladkarako

This comment has been minimized.

Show comment
Hide comment
@eladkarako

eladkarako May 24, 2014

save yourself some html by joining the viewport declaration:
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

eladkarako commented May 24, 2014

save yourself some html by joining the viewport declaration:
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
@regikono

This comment has been minimized.

Show comment
Hide comment
@regikono

regikono Jul 8, 2014

For me, i could make it worked by replacing:
FROM: <link href="/static/images/
TO: <link href="static/images/
So, I needed to remove the first "/" from all links.

regikono commented Jul 8, 2014

For me, i could make it worked by replacing:
FROM: <link href="/static/images/
TO: <link href="static/images/
So, I needed to remove the first "/" from all links.
@antoinemichea

This comment has been minimized.

Show comment
Hide comment
@antoinemichea

antoinemichea Aug 8, 2014

I try lof of things, but apple-touch-startup-image are not displayed on my iphone 5s and on my ipad mini 2, both on iOS 7.1.2
Someone got any idea ? Apple remove it ?

antoinemichea commented Aug 8, 2014

I try lof of things, but apple-touch-startup-image are not displayed on my iphone 5s and on my ipad mini 2, both on iOS 7.1.2
Someone got any idea ? Apple remove it ?
@Draco18s

This comment has been minimized.

Show comment
Hide comment
@Draco18s

Draco18s Aug 19, 2014

Ok, I have to say:
This is weird:

1536x2008

1496x2048

The landscape image, on the same device, is narrower and taller than the portrait image (40 px). I assume this means that the landscape image content needs to be rotated 90 degrees (counter)clockwise?

Draco18s commented Aug 19, 2014

Ok, I have to say:
This is weird:

1536x2008

1496x2048

The landscape image, on the same device, is narrower and taller than the portrait image (40 px). I assume this means that the landscape image content needs to be rotated 90 degrees (counter)clockwise?
@kfwerf

This comment has been minimized.

Show comment
Hide comment
@kfwerf

kfwerf Aug 19, 2014

Get some white on black statusbars, for anyone interested:

Add this to your head

   <meta name="apple-mobile-web-app-capable" content="yes"
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"

On runtime or load, add this.

if(window.navigator.standalone) {
    $("meta[name='apple-mobile-web-app-status-bar-style']").remove();
   $('html').addClass('webapp');

}

If startup images dont show up, make sure there in your root. For some reason they only pick that up, so for instance www.domain.com/static/images/root.png rather than in some wordpress template dir.

kfwerf commented Aug 19, 2014

Get some white on black statusbars, for anyone interested:

Add this to your head

   <meta name="apple-mobile-web-app-capable" content="yes"
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"

On runtime or load, add this.

if(window.navigator.standalone) {
    $("meta[name='apple-mobile-web-app-status-bar-style']").remove();
   $('html').addClass('webapp');

}

If startup images dont show up, make sure there in your root. For some reason they only pick that up, so for instance www.domain.com/static/images/root.png rather than in some wordpress template dir.
@kaioken

This comment has been minimized.

Show comment
Hide comment
@kaioken

kaioken Aug 29, 2014

@saturnlevrai did you find a solution to the startup image? not working on IOS 7.1 or 7.1.2 (Iphone 5s)

kaioken commented Aug 29, 2014

@saturnlevrai did you find a solution to the startup image? not working on IOS 7.1 or 7.1.2 (Iphone 5s)
@zachchatterton

This comment has been minimized.

Show comment
Hide comment
@zachchatterton

zachchatterton Sep 16, 2014

This is great! Does anyone have the updated sizes for the new iPhone 6 and iPhone 6 Plus?

zachchatterton commented Sep 16, 2014

This is great! Does anyone have the updated sizes for the new iPhone 6 and iPhone 6 Plus?
@jamesrehfisch

This comment has been minimized.

Show comment
Hide comment
@jamesrehfisch

jamesrehfisch Sep 17, 2014

Does anyone know if there's any way to stop the splash image stretching to full screen before the status bar loads?

jamesrehfisch commented Sep 17, 2014

Does anyone know if there's any way to stop the splash image stretching to full screen before the status bar loads?
@onigetoc

This comment has been minimized.

Show comment
Hide comment
@onigetoc

onigetoc Sep 22, 2014

It's not logical that Ipad Landscape & portrait are not the exact same size but just inversed.

onigetoc commented Sep 22, 2014

It's not logical that Ipad Landscape & portrait are not the exact same size but just inversed.
@adchsm

This comment has been minimized.

Show comment
Hide comment
@adchsm

adchsm Sep 25, 2014

@Draco18s, @onigetoc - Hope this helps:

The iPad display size is 1536 x 2048 and the status bar is 40px, so the portrait image is 1536 x 2008 (2048 - 40), and the landscape image is 1496 (1536 - 40) x 2048.

I'm also having having issues getting the startup images to be displayed on iPhones on iOS 7.1, i'll post back here if I find anything.

adchsm commented Sep 25, 2014

@Draco18s, @onigetoc - Hope this helps:

The iPad display size is 1536 x 2048 and the status bar is 40px, so the portrait image is 1536 x 2008 (2048 - 40), and the landscape image is 1496 (1536 - 40) x 2048.

I'm also having having issues getting the startup images to be displayed on iPhones on iOS 7.1, i'll post back here if I find anything.
@snoopyjc

This comment has been minimized.

Show comment
Hide comment
@snoopyjc

snoopyjc Oct 14, 2014

Do you have the lines to add for the iPhone 6 and 6+ please?
--joe

snoopyjc commented Oct 14, 2014

Do you have the lines to add for the iPhone 6 and 6+ please?
--joe
@johndgiese
@ccorcos

This comment has been minimized.

Show comment
Hide comment
@ccorcos

ccorcos Jan 7, 2015

It would be great to have android on here too!

ccorcos commented Jan 7, 2015

It would be great to have android on here too!
@patrickcate

This comment has been minimized.

Show comment
Hide comment
@patrickcate

patrickcate Jan 19, 2015

Now that iOS 8 supports animated png's, does anyone know if you can use them for the startup images?

patrickcate commented Jan 19, 2015

Now that iOS 8 supports animated png's, does anyone know if you can use them for the startup images?
@henrypoydar
@zimagin

This comment has been minimized.

Show comment
Hide comment
@zimagin

zimagin Jan 24, 2015

very nice work
i tested on iphone 3 and 4 and also on ipad1... it 's amazingly working
thanks.
however, can you please help me to validate it with w3c standards validator ?
best regards.

zimagin commented Jan 24, 2015

very nice work
i tested on iphone 3 and 4 and also on ipad1... it 's amazingly working
thanks.
however, can you please help me to validate it with w3c standards validator ?
best regards.
@NathanBowers

This comment has been minimized.

Show comment
Hide comment
@NathanBowers

NathanBowers Jan 26, 2015

As far as I can tell iPad must be in portrait and not landscape when the homescreen app is saved in Safari otherwise iPad ignores the startup images. This is on iOS 8.

NathanBowers commented Jan 26, 2015

As far as I can tell iPad must be in portrait and not landscape when the homescreen app is saved in Safari otherwise iPad ignores the startup images. This is on iOS 8.
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jan 28, 2015

I updated this to support iOS 8. Read more on my blog.
Owner

tfausak commented Jan 28, 2015

I updated this to support iOS 8. Read more on my blog.
@wle8300

This comment has been minimized.

Show comment
Hide comment
@wle8300

wle8300 Jan 29, 2015

Is this a typo?
`

`

Change to sizes="180x180"?

wle8300 commented Jan 29, 2015

Is this a typo?
`

`

Change to sizes="180x180"?
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jan 29, 2015

That's not a typo, @williamle8300! The iPhone 6 Plus needs a 180x180 (60@3x) icon, but it fetches the 120x120 icon.
Owner

tfausak commented Jan 29, 2015

That's not a typo, @williamle8300! The iPhone 6 Plus needs a 180x180 (60@3x) icon, but it fetches the 120x120 icon.
@wle8300

This comment has been minimized.

Show comment
Hide comment
@wle8300

wle8300 Jan 29, 2015

Dang. You rock. I would have never figured that out... You saved me a few hairs pulled haha!

EDIT:
Wait... so does the iPhone 6 need an actual 120px sized square? Or 180px?

wle8300 commented Jan 29, 2015

Dang. You rock. I would have never figured that out... You saved me a few hairs pulled haha!

EDIT:
Wait... so does the iPhone 6 need an actual 120px sized square? Or 180px?
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jan 30, 2015

The regular iPhone 6 uses the 180x180 icon and scales it down. There's no way to serve separate icons for the 6 and 6 Plus.
Owner

tfausak commented Jan 30, 2015

The regular iPhone 6 uses the 180x180 icon and scales it down. There's no way to serve separate icons for the 6 and 6 Plus.
@Chinaski1979

This comment has been minimized.

Show comment
Hide comment
@Chinaski1979

Chinaski1979 Jan 30, 2015

Following your suggestion I got it to work but when I lunch the web app from the shortcut the startup image shows only for half a second and then it shows a blank screen until it finally loades the app. How can I make it to show longer?

Chinaski1979 commented Jan 30, 2015

Following your suggestion I got it to work but when I lunch the web app from the shortcut the startup image shows only for half a second and then it shows a blank screen until it finally loades the app. How can I make it to show longer?
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jan 31, 2015

@Chinaski1979 that's the expected behavior. The startup image is only shown until the HTML loads. You could set the background of your app to the startup image while it's loading.
Owner

tfausak commented Jan 31, 2015

@Chinaski1979 that's the expected behavior. The startup image is only shown until the HTML loads. You could set the background of your app to the startup image while it's loading.
@franceindia

This comment has been minimized.

Show comment
Hide comment
@franceindia

franceindia Feb 2, 2015

I created a Sketch 3 template here with all the artboards sized and named like the ones in this gist... Use it freely.

https://github.com/franceindia/design/blob/master/Apple%20Startup%20Image%20Template.sketch

franceindia commented Feb 2, 2015

I created a Sketch 3 template here with all the artboards sized and named like the ones in this gist... Use it freely.

https://github.com/franceindia/design/blob/master/Apple%20Startup%20Image%20Template.sketch
@jonharris7

This comment has been minimized.

Show comment
Hide comment
@jonharris7

jonharris7 Feb 9, 2015

It would be really cool if this included the various graphics. Then it would be a single upload to your web server to begin testing. Something like various solid colors for the different sizes with the size printed on it in a big font. Wish I had time to volunteer for this...

jonharris7 commented Feb 9, 2015

It would be really cool if this included the various graphics. Then it would be a single upload to your web server to begin testing. Something like various solid colors for the different sizes with the size printed on it in a big font. Wish I had time to volunteer for this...
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Feb 10, 2015

@jonharris7 I left the images out of this Gist because they'd take up a lot of space. You can take all the images from my blog, though. They are here: https://github.com/tfausak/tfausak.github.io/tree/master/static/images
Owner

tfausak commented Feb 10, 2015

@jonharris7 I left the images out of this Gist because they'd take up a lot of space. You can take all the images from my blog, though. They are here: https://github.com/tfausak/tfausak.github.io/tree/master/static/images
@jonharris7

This comment has been minimized.

Show comment
Hide comment
@jonharris7

jonharris7 Feb 12, 2015

@tfausak Thanks for the reply and your work on maintaining this. I saw the images on your blog. It would be super cool to overlay the pixel sizes on the images so you could verify which image was being served up, but thanks for all your work!

jonharris7 commented Feb 12, 2015

@tfausak Thanks for the reply and your work on maintaining this. I saw the images on your blog. It would be super cool to overlay the pixel sizes on the images so you could verify which image was being served up, but thanks for all your work!
@jonharris7

This comment has been minimized.

Show comment
Hide comment
@jonharris7

jonharris7 Feb 12, 2015

When I launch a webapp from the start screen on iPad, if the device is oriented landscape, then the whole page is shifted up so the top of it overlaps the status bar (time, battery, etc.) There is a white border at the bottom of the same size to "compensate". Are others seeing this? You may not notice It in a lot of sites (including the demo one) because they use a white background and have enough top margin where there is no actual overlap. But for me, this isn't an option with the styles we are using.

jonharris7 commented Feb 12, 2015

When I launch a webapp from the start screen on iPad, if the device is oriented landscape, then the whole page is shifted up so the top of it overlaps the status bar (time, battery, etc.) There is a white border at the bottom of the same size to "compensate". Are others seeing this? You may not notice It in a lot of sites (including the demo one) because they use a white background and have enough top margin where there is no actual overlap. But for me, this isn't an option with the styles we are using.
@selanac82

This comment has been minimized.

Show comment
Hide comment
@selanac82

selanac82 Feb 17, 2015

for the life of me i can't get this to work. i only need a startup image for landscape. i have all the proper link tags and the startup image will never show.

EDIT: your example page doesn't seem to work.
http://taylor.fausak.me/static/pages/2015-01-27-ios-8-web-app.html

I'm trying this on an iPad 2 with IOS 8

selanac82 commented Feb 17, 2015

for the life of me i can't get this to work. i only need a startup image for landscape. i have all the proper link tags and the startup image will never show.

EDIT: your example page doesn't seem to work.
http://taylor.fausak.me/static/pages/2015-01-27-ios-8-web-app.html

I'm trying this on an iPad 2 with IOS 8
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Feb 24, 2015

Thanks for the heads up @selanac82. I was using the wrong icon URLs. Everything should work now. Make sure you're adding the page to your home screen, otherwise the startup images won't work.
Owner

tfausak commented Feb 24, 2015

Thanks for the heads up @selanac82. I was using the wrong icon URLs. Everything should work now. Make sure you're adding the page to your home screen, otherwise the startup images won't work.
@csmcgee

This comment has been minimized.

Show comment
Hide comment
@csmcgee

csmcgee Feb 27, 2015

I need some help here getting this to work for iPhone 6 plus. When I add the web app to the home screen and launch all I get is a white screen.

I'm using the following:

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

But for some reason its not showing up at all. I've tried .jpg as well. I can visit the image like by opening in a new tab so the url should be correct. Any suggestions? What could be messing this up for me on iPhone 6+? How should I debug the phone and/or image?

Any help here is appreciated. Thanks.

csmcgee commented Feb 27, 2015

I need some help here getting this to work for iPhone 6 plus. When I add the web app to the home screen and launch all I get is a white screen.

I'm using the following:

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

But for some reason its not showing up at all. I've tried .jpg as well. I can visit the image like by opening in a new tab so the url should be correct. Any suggestions? What could be messing this up for me on iPhone 6+? How should I debug the phone and/or image?

Any help here is appreciated. Thanks.
@datitisev

This comment has been minimized.

Show comment
Hide comment
@datitisev

datitisev Mar 29, 2015

THANKS!!!

datitisev commented Mar 29, 2015

THANKS!!!
@vergissberlin

This comment has been minimized.

Show comment
Hide comment
@vergissberlin

vergissberlin Mar 31, 2015

For testing it will be nice to have test images from placehold like this:
https://gist.github.com/vergissberlin/235171acb47f9be7aaa8

vergissberlin commented Mar 31, 2015

For testing it will be nice to have test images from placehold like this:
https://gist.github.com/vergissberlin/235171acb47f9be7aaa8
@mkwatson

This comment has been minimized.

Show comment
Hide comment
@mkwatson

mkwatson Apr 1, 2015

This is amazing!

mkwatson commented Apr 1, 2015

This is amazing!
@barneycarroll

This comment has been minimized.

Show comment
Hide comment
@barneycarroll

barneycarroll May 7, 2015

@tfausak thanks for this invaluable boilerplate. The splash screen is great in principle, but I'm having difficulty persisting it. I've set inline styles on my HTML element to display the same image as a background — later when the application has loaded I transition the body in. Sadly this doesn't work: when the application launches, the splash screen is set as expected but the screen abruptly goes white. After some indeterminate loading activity, the same image is revealed again (as my styles dictate), but I can't seem to avoid the flash of unstyled / lack of content. Any ideas?

barneycarroll commented May 7, 2015

@tfausak thanks for this invaluable boilerplate. The splash screen is great in principle, but I'm having difficulty persisting it. I've set inline styles on my HTML element to display the same image as a background — later when the application has loaded I transition the body in. Sadly this doesn't work: when the application launches, the splash screen is set as expected but the screen abruptly goes white. After some indeterminate loading activity, the same image is revealed again (as my styles dictate), but I can't seem to avoid the flash of unstyled / lack of content. Any ideas?
@paicolman

This comment has been minimized.

Show comment
Hide comment
@paicolman

paicolman May 20, 2015

Thanks a lot @tfausak! One thing though: You don't happen to know how to make this work on an SSL website, do you? If I load my test page with http, all is well and nice. With https, nothing works: Icon is the printscreen of the app, and splashscreen is a nice white page... :(

paicolman commented May 20, 2015

Thanks a lot @tfausak! One thing though: You don't happen to know how to make this work on an SSL website, do you? If I load my test page with http, all is well and nice. With https, nothing works: Icon is the printscreen of the app, and splashscreen is a nice white page... :(
@jabez128

This comment has been minimized.

Show comment
Hide comment
@jabez128

jabez128 May 22, 2015

cool!

jabez128 commented May 22, 2015

cool!
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Jun 19, 2015

@vergissberlin: I updated this to use placeholder images. Thanks for the suggestion!

@barneycarroll: As far as I know, you can't avoid that. There will probably always be a brief flash of white between the startup image and your site.

@paicolman: This should work over HTTPS. Make sure that your images are being served over HTTPS.
Owner

tfausak commented Jun 19, 2015

@vergissberlin: I updated this to use placeholder images. Thanks for the suggestion!

@barneycarroll: As far as I know, you can't avoid that. There will probably always be a brief flash of white between the startup image and your site.

@paicolman: This should work over HTTPS. Make sure that your images are being served over HTTPS.
@ericholmer

This comment has been minimized.

Show comment
Hide comment
@ericholmer

ericholmer Jul 20, 2015

First, thanks @tfausak for sharing this awesome tool.

Agree with @csmcgee and selanac82 however - can get the icons to load up fine but the startup image will not load on my iPad Air 2. It works for my iPhone 6 however. Any advice?

ericholmer commented Jul 20, 2015

First, thanks @tfausak for sharing this awesome tool.

Agree with @csmcgee and selanac82 however - can get the icons to load up fine but the startup image will not load on my iPad Air 2. It works for my iPhone 6 however. Any advice?
@x4080

This comment has been minimized.

Show comment
Hide comment
@x4080

x4080 Aug 16, 2015

Ipad 3 startup image not showing also in ios 8 in landscape mode, works ok on portrait mode, maybe there's a bug in ios 8? IOS 7 works ok before

edit: it is showing is image is save in portrait version, so in landscape mode, the image still in portrait mode, resolution is 1496x2048 and not 2048x1496

x4080 commented Aug 16, 2015

Ipad 3 startup image not showing also in ios 8 in landscape mode, works ok on portrait mode, maybe there's a bug in ios 8? IOS 7 works ok before

edit: it is showing is image is save in portrait version, so in landscape mode, the image still in portrait mode, resolution is 1496x2048 and not 2048x1496
@1dot44mb

This comment has been minimized.

Show comment
Hide comment
@1dot44mb

1dot44mb Sep 11, 2015

Hi, thanks for great gist. As the mobile environment is constantly changing; i suppose this functionality will have changes by time too. If you plan to keep this updated, would you mind creating a bower package so we can practically follow the updates?

Thanks.

1dot44mb commented Sep 11, 2015

Hi, thanks for great gist. As the mobile environment is constantly changing; i suppose this functionality will have changes by time too. If you plan to keep this updated, would you mind creating a bower package so we can practically follow the updates?

Thanks.
@mike-zarandona

This comment has been minimized.

Show comment
Hide comment
@mike-zarandona

mike-zarandona Sep 25, 2015

This is incredible, thank you so much. It appears as if iOS 9 may have broken web app capable startup screens - anyone else having the same issues?

mike-zarandona commented Sep 25, 2015

This is incredible, thank you so much. It appears as if iOS 9 may have broken web app capable startup screens - anyone else having the same issues?
@ThatGuySamUK

This comment has been minimized.

Show comment
Hide comment
@ThatGuySamUK

ThatGuySamUK Oct 5, 2015

@mike-zarandona I'm having the same issue too! Hopefully we can get an updated gist?

ThatGuySamUK commented Oct 5, 2015

@mike-zarandona I'm having the same issue too! Hopefully we can get an updated gist?
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 22, 2015

@tfausak @mike-zarandona - Has anyone figured out how to fix the iOS 9 not showing web app capable startup screens? I have tested thoroughly and this is an issue?

ghost commented Oct 22, 2015

@tfausak @mike-zarandona - Has anyone figured out how to fix the iOS 9 not showing web app capable startup screens? I have tested thoroughly and this is an issue?
@tfausak

This comment has been minimized.

Show comment
Hide comment
@tfausak

tfausak Oct 25, 2015

@mike-zarandona, @ThatGuySamUK, and @CodedInk: I think (at least) startup images are broken in iOS 9. Safari still makes requests for the images, but I cannot figure out how to make it display them. Other people have found this bug, as noted in this Stack Overflow question.
Owner

tfausak commented Oct 25, 2015

@mike-zarandona, @ThatGuySamUK, and @CodedInk: I think (at least) startup images are broken in iOS 9. Safari still makes requests for the images, but I cannot figure out how to make it display them. Other people have found this bug, as noted in this Stack Overflow question.
@bluntspoon

This comment has been minimized.

Show comment
Hide comment
@bluntspoon

bluntspoon Nov 23, 2015

"As far as I can tell iPad must be in portrait and not landscape when the homescreen app is saved in Safari otherwise iPad ignores the startup images. This is on iOS 8."

Is this still true for iOS8, my tests say "Yes".

bluntspoon commented Nov 23, 2015

"As far as I can tell iPad must be in portrait and not landscape when the homescreen app is saved in Safari otherwise iPad ignores the startup images. This is on iOS 8."

Is this still true for iOS8, my tests say "Yes".
@addyosmani

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Dec 24, 2015

Verified that startup images (apple-touch-startup-image) do appear to still be busted on iOS9 with iPhone 5, 6, 6 Plus, iPad 2. Ugh. https://forums.developer.apple.com/thread/23924 mentions that this hasn't been fixed in iOS 9.2. Haven't found any official responses from Apple on whether this was intentionally removed or this is just a regression.

For now, I'm going to keep including the tags/custom graphics in my apps until either a fix or note from them gets published.

addyosmani commented Dec 24, 2015

Verified that startup images (apple-touch-startup-image) do appear to still be busted on iOS9 with iPhone 5, 6, 6 Plus, iPad 2. Ugh. https://forums.developer.apple.com/thread/23924 mentions that this hasn't been fixed in iOS 9.2. Haven't found any official responses from Apple on whether this was intentionally removed or this is just a regression.

For now, I'm going to keep including the tags/custom graphics in my apps until either a fix or note from them gets published.
@plainspace

This comment has been minimized.

Show comment
Hide comment
@plainspace

plainspace Dec 30, 2015

So @addyosmani you are using the gist above?

plainspace commented Dec 30, 2015

So @addyosmani you are using the gist above?
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jan 30, 2016

You are amazing. Thank you!

ghost commented Jan 30, 2016

You are amazing. Thank you!
@vernondegoede

This comment has been minimized.

Show comment
Hide comment
@vernondegoede

vernondegoede Feb 29, 2016

Thanks a lot! Just what I was looking for.

vernondegoede commented Feb 29, 2016

Thanks a lot! Just what I was looking for.
@addyosmani

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Mar 22, 2016

Can anyone verify if this is still an issue in 9.3?

addyosmani commented Mar 22, 2016

Can anyone verify if this is still an issue in 9.3?
@escherwd

This comment has been minimized.

Show comment
Hide comment
@escherwd

escherwd Mar 26, 2016

Thanks, this was very helpful!

escherwd commented Mar 26, 2016

Thanks, this was very helpful!
@Gerwinnz

This comment has been minimized.

Show comment
Hide comment
@Gerwinnz

Gerwinnz Apr 1, 2016

Seems like startup images still aren't working on iOS 9.3. Just finished putting some together in Photoshop and then I found this thread. Hopefully this is resolved.

Gerwinnz commented Apr 1, 2016

Seems like startup images still aren't working on iOS 9.3. Just finished putting some together in Photoshop and then I found this thread. Hopefully this is resolved.
@Gerwinnz

This comment has been minimized.

Show comment
Hide comment
@Gerwinnz

Gerwinnz Apr 1, 2016

@plainspace do you have them working on iOS 9x?

Gerwinnz commented Apr 1, 2016

@plainspace do you have them working on iOS 9x?
@edouard-claude

This comment has been minimized.

Show comment
Hide comment
@edouard-claude

edouard-claude Apr 30, 2016

Thanks a lot!

edouard-claude commented Apr 30, 2016

Thanks a lot!
@dungsaga

This comment has been minimized.

Show comment
Hide comment
@dungsaga

dungsaga Jun 17, 2016

in iOS 9, startup images are borked :(

dungsaga commented Jun 17, 2016

in iOS 9, startup images are borked :(
@cybnz

This comment has been minimized.

Show comment
Hide comment
@cybnz

cybnz Aug 16, 2016

This is amazing, thanks a lot! I was wondering if you could link to other pages in the web app, without it going into Safari (or your default browser)?

cybnz commented Aug 16, 2016 •
edited
Edited 1 time
  • @cybnz cybnz edited Aug 17, 2016 (most recent)

This is amazing, thanks a lot! I was wondering if you could link to other pages in the web app, without it going into Safari (or your default browser)?
@bdthemes

This comment has been minimized.

Show comment
Hide comment
@bdthemes

bdthemes Sep 28, 2016

Thanks :)

bdthemes commented Sep 28, 2016

Thanks :)
@omardlhz

This comment has been minimized.

Show comment
Hide comment
@omardlhz

omardlhz Nov 15, 2016

Is this not working for anyone else in iOS10?

omardlhz commented Nov 15, 2016

Is this not working for anyone else in iOS10?
@aimore

This comment has been minimized.

Show comment
Hide comment
@aimore

aimore Dec 18, 2016

iOS 10? :(

aimore commented Dec 18, 2016

iOS 10? :(
@ThisIsQasim

This comment has been minimized.

Show comment
Hide comment
@ThisIsQasim

ThisIsQasim Jul 3, 2017

Still not working in iOS10. What a shame Apple!

ThisIsQasim commented Jul 3, 2017

Still not working in iOS10. What a shame Apple!
@floriansegginger

This comment has been minimized.

Show comment
Hide comment
@floriansegginger

floriansegginger Jul 21, 2017

Can confirm this does not work on iPad 2 + iOS 9.3.5

floriansegginger commented Jul 21, 2017

Can confirm this does not work on iPad 2 + iOS 9.3.5
@BorisBresciani
@dsgriffin

This comment has been minimized.

Show comment
Hide comment
@dsgriffin

dsgriffin Jan 31, 2018

Still busted as of iOS 11 in 2018 :/

dsgriffin commented Jan 31, 2018

Still busted as of iOS 11 in 2018 :/
@rhroyston
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment