Menu
I have the following code in the <head> of my web app, but I'm just getting a white screen on my iPhone 3GS while the DOM loads instead of the splash screen.
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!--STYLES--> <!--SCRIPTS--> <!-- iPhone LAUNCHSCREEN--> <link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) LAUNCHSCREEN--> <link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPhone 5+ LAUNCHSCREEN--> <link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image"> How can I get my splash screen to display correctly on all versions of the iPhone? Code not shown, but my web app icons are working when added to the homepage. I'm using jQuery Mobile to build this web app.
I have also confirmed that the PNG images are exactly the correct sizes and I have deleted the web app icon, refreshed, and re-added to the homescreen multiple times. None of the solutions I've found on StackOverflow have worked for me. I have not tried the JavaScript solutions, because I'm sure there is a pure CSS solution.
793
No, it is not required to set a launch image.
Adding splash screen on iOS xcodeproj in Xcode. Then, drag the file BootSplash. storyboard under the Project directory in the Xcode file manager on the left side of the Xcode from the path ios/app-name/ directory. After dragging it, Xcode will prompt the following to create a folder reference.
Splash screens (also known as launch screens) provide a simple initial experience while your mobile app loads. They set the stage for your application, while allowing time for the app engine to load and your app to initialize. This guide teaches you how to use splash screens appropriately on iOS and Android.
The sizes attribute works for apple-touch-icons but it doesn't work for apple-touch-startup-images. The only way to target the startup images is with media queries. Adam's answer is good but relies on the <link>s being in a particular order since the media queries are under-specified. Here are the fully-qualified media queries:
<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPhone 5 --> <link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.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) --> <link href="apple-touch-startup-image-748x1024.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) --> <link href="apple-touch-startup-image-1536x2008.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) --> <link href="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"> Also note that certain viewports will cause your web app to be letterboxed on the iPhone 5:
<!-- 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"> I maintain a Gist with a minimal iOS web app, including startup images and icons. If you want some more commentary, I also wrote a blog post about iPhone 5 startup images.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
