<!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> |
This comment has been minimized.
This comment has been minimized.
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! |
This comment has been minimized.
This comment has been minimized.
Good catch, @gwilson. I've updated it to fix that. I also added support for the iPhone 5. |
This comment has been minimized.
This comment has been minimized.
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"> |
This comment has been minimized.
This comment has been minimized.
This is incredibly useful! What a time-saver! Much better than Apple's own documentation... ;-) |
This comment has been minimized.
This comment has been minimized.
To target the Safari mobile toolbar: <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" /> |
This comment has been minimized.
This comment has been minimized.
Thanks, it's really helpful! |
This comment has been minimized.
This comment has been minimized.
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: Might be of interest to someone... go figure!... |
This comment has been minimized.
This comment has been minimized.
thanks for that! really useful! |
This comment has been minimized.
This comment has been minimized.
Wonderful. I sent you a tip. You can get it at flattr.com |
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
Can you explain why the size of the iPhone 5 launch screen is 640x1096 and not 640x1136? Just curious! |
This comment has been minimized.
This comment has been minimized.
@martinkool The 40 pixel difference is the status bar at the top. |
This comment has been minimized.
This comment has been minimized.
Hi! Thanks a lot for your script! |
This comment has been minimized.
This comment has been minimized.
does anyone have the resolutions for the newer iPad mini? EDIT: same resolution as iPad 2, nothing else needed. |
This comment has been minimized.
This comment has been minimized.
Tested and works on iPhone4s, iPad mini, iPad, iPhone 5, iPod5. <!-- 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"> |
This comment has been minimized.
This comment has been minimized.
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)" /> |
This comment has been minimized.
This comment has been minimized.
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 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. |
This comment has been minimized.
This comment has been minimized.
Hi, maybe you want to add this tag, too? TAG PURPOSE LINKS Cheers |
This comment has been minimized.
This comment has been minimized.
Very useful, thanks a lot! |
This comment has been minimized.
This comment has been minimized.
The only problem with this solution is that the filenames you have used are confusing. apple-touch-startup-image-640x920.png the width and height you have used doesn't follow the X * Y convention. Which is width and which is height? |
This comment has been minimized.
This comment has been minimized.
All the files I use have width x height in their filenames. For example, |
This comment has been minimized.
This comment has been minimized.
This is great except that it has no viewport scaling. Once you add in a |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
Hi, I'm pretty sure line 58 is wrong. It is a landscape resolution with a portrait image:
It rendered wrong for me anyway so I changed mine to this and it worked
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 |
This comment has been minimized.
This comment has been minimized.
@mbhatton: That documentation is for native apps. Apple doesn't provide any official documentation for startup images on iPads. To quote my own post:
|
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
I have the same problem as @sahilkhosla and @scottopolis. Is anybody have a workaround ? |
This comment has been minimized.
This comment has been minimized.
@tfausak do you know why landscape images are meant to be in portrait mode? |
This comment has been minimized.
This comment has been minimized.
Thanks so much! very useful! What a time-saver! :) |
This comment has been minimized.
This comment has been minimized.
epic. |
This comment has been minimized.
This comment has been minimized.
Same problem as @sahilkhosla and @scottopolis and @patriotbg. Will post if I find a solution. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
@bhays I second you, on 5s I got all my startup images loaded one ontop the other, weird?! |
This comment has been minimized.
This comment has been minimized.
Brilliant work! |
This comment has been minimized.
This comment has been minimized.
Ios icon generator for all resolutions: |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Thanks for the guide. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Line 79 should read 1024 not 1004 |
This comment has been minimized.
This comment has been minimized.
@hendronf Remember to subtract 20 or 40 pxs for the status bar |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
save yourself some html by joining the viewport declaration: |
This comment has been minimized.
This comment has been minimized.
For me, i could make it worked by replacing: |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Ok, I have to say: 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? |
This comment has been minimized.
This comment has been minimized.
Get some white on black statusbars, for anyone interested: Add this to your head
On runtime or load, add this.
} 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. |
This comment has been minimized.
This comment has been minimized.
@saturnlevrai did you find a solution to the startup image? not working on IOS 7.1 or 7.1.2 (Iphone 5s) |
This comment has been minimized.
This comment has been minimized.
This is great! Does anyone have the updated sizes for the new iPhone 6 and iPhone 6 Plus? |
This comment has been minimized.
This comment has been minimized.
Does anyone know if there's any way to stop the splash image stretching to full screen before the status bar loads? |
This comment has been minimized.
This comment has been minimized.
It's not logical that Ipad Landscape & portrait are not the exact same size but just inversed. |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
Do you have the lines to add for the iPhone 6 and 6+ please? |
This comment has been minimized.
This comment has been minimized.
Would it be worth adding a comment about the manifest? |
This comment has been minimized.
This comment has been minimized.
It would be great to have android on here too! |
This comment has been minimized.
This comment has been minimized.
Now that iOS 8 supports animated png's, does anyone know if you can use them for the startup images? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
very nice work |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
I updated this to support iOS 8. Read more on my blog. |
This comment has been minimized.
This comment has been minimized.
Is this a typo? Change to |
This comment has been minimized.
This comment has been minimized.
That's not a typo, @williamle8300! The iPhone 6 Plus needs a 180x180 (60@3x) icon, but it fetches the 120x120 icon. |
This comment has been minimized.
This comment has been minimized.
Dang. You rock. I would have never figured that out... You saved me a few hairs pulled haha! EDIT: |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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... |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
@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! |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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. I'm trying this on an iPad 2 with IOS 8 |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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:
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. |
This comment has been minimized.
This comment has been minimized.
THANKS!!! |
This comment has been minimized.
This comment has been minimized.
For testing it will be nice to have test images from placehold like this: |
This comment has been minimized.
This comment has been minimized.
This is amazing! |
This comment has been minimized.
This comment has been minimized.
@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? |
This comment has been minimized.
This comment has been minimized.
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... :( |
This comment has been minimized.
This comment has been minimized.
cool! |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
@mike-zarandona I'm having the same issue too! Hopefully we can get an updated gist? |
This comment has been minimized.
This comment has been minimized.
@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? |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
"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". |
This comment has been minimized.
This comment has been minimized.
Verified that startup images ( 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. |
This comment has been minimized.
This comment has been minimized.
So @addyosmani you are using the gist above? |
This comment has been minimized.
This comment has been minimized.
You are amazing. Thank you! |
This comment has been minimized.
This comment has been minimized.
Thanks a lot! Just what I was looking for. |
This comment has been minimized.
This comment has been minimized.
Can anyone verify if this is still an issue in 9.3? |
This comment has been minimized.
This comment has been minimized.
Thanks, this was very helpful! |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@plainspace do you have them working on iOS 9x? |
This comment has been minimized.
This comment has been minimized.
Thanks a lot! |
This comment has been minimized.
This comment has been minimized.
in iOS 9, startup images are borked :( |
This comment has been minimized.
This comment has been minimized.
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)? |
This comment has been minimized.
This comment has been minimized.
Thanks :) |
This comment has been minimized.
This comment has been minimized.
Is this not working for anyone else in iOS10? |
This comment has been minimized.
This comment has been minimized.
iOS 10? :( |
This comment has been minimized.
This comment has been minimized.
Still not working in iOS10. What a shame Apple! |
This comment has been minimized.
This comment has been minimized.
Can confirm this does not work on iPad 2 + iOS 9.3.5 |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Still busted as of iOS 11 in 2018 :/ |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
found a working solution here: https://appsco.pe/developer/splash-screens & https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o |
This comment has been minimized.
This comment has been minimized.
This lib can be handy: https://github.com/onderceylan/pwa-asset-generator |
This comment has been minimized.
Hi... Budy,
i was catching my hair to solve this problem ....
But i got solution form this website ....
Very very thank you ...