CODEWITHSUNDEEP
htmliossplash-screen
James Baker
James Baker

Reputation: 115

iOS Web App Splash Screen not loading

I've been trying to get a splash screen for my web app to appear on iOS devices. When i load up the app after adding it to my home screen I get a white screen and nothing loads. However if i move the meta tags below my icons and splash screens the app will load up fine but the splash screen will not load. The icons work for all devices no matter where the code is.

Below is the code that i have at the moment:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>


<!--iOS ICONS-->

<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-120x120.png" 
  rel="apple-touch-icon" 
  sizes="120x120" />

<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-152x152.png" 
  rel="apple-touch-icon" 
  sizes="152x152" />

 <link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-180x180.png" 
  rel="apple-touch-icon" 
  sizes="180x180" />


<!--iOS SPLASH SCREENS-->

<!--iPhone 5-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-portrait@2x~iphone5.jpg"
  media="(device-width: 320px) and (device-height: 568px) 
        and (-webkit-device-pixel-ratio: 2)"/>

<!--iPad, Landscape-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape~ipad.png"        
  media="(device-width: 768px) and (device-height: 1024px) 
        and (orientation: landscape) 
        and (-webkit-device-pixel-ratio: 1)"/>

<!--iPad retina, Landscape-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape@2x~ipad.png"   
  media="(device-width: 768px) and (device-height: 1024px) 
        and (orientation: landscape) 
        and (-webkit-device-pixel-ratio: 2)"/>

The reason for the long href which includes google drive links is because I have the site on google dive for testing purposes. It basically represents the website address.

<--EDIT-->

Here is what the code looks like now I have renamed some of the files and moved them. I noticed that the google drive address was not needed.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<!-- iPhone ICON -->
<link href="App Icon/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="App Icon/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="App Icon/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="App Icon/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

<!-- iPhone SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="images/apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

The icons work fine on any device I try the app on. However the splash screen still will not work.

There is only one page that says HELLO WORLD!. When it is added to the home screen the icon works but the splash screen does not.

Upvotes: 6

Views: 6462

Answers (1)

hopkins-matt
hopkins-matt

Reputation: 2823

As per Marconi's answer on Mulitple “apple-touch-startup-image” resolutions for iOS web app (esp. for iPad)?, try these for the splash screen meta tags instead: (You'll still need to iPhone 6 & 6 Plus tags)

    <!-- iPhone SPLASHSCREEN-->
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 (Retina) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Updated Demo:

   <!-- iPad retina portrait startup image -->
   <link href="//placehold.it/1536x2008.png"
         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="//placehold.it/1496x2048.png"
         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="//placehold.it/768x1004.png"
         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="//placehold.it/748x1024.png"
         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="//placehold.it/1242x2148.png"
         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="//placehold.it/1182x2208.png"
         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="//placehold.it/750x1294.png"
         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="//placehold.it/640x1096.png"
         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="//placehold.it/640x920.png"
         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="//placehold.it/320x460.png"
         media="(device-width: 320px) and (device-height: 480px)
                and (-webkit-device-pixel-ratio: 1)"
         rel="apple-touch-startup-image">

Upvotes: 7

Related Questions