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.