CODEWITHSUNDEEP
iphone
Scrappydog
Scrappydog

Reputation: 2874

iPhone web splash screen not working

In iPhone web applications you supposedly can define a custom splash screen that will appear while the site is loading (when loading the site from a saved bookmark icon on the home page). The point is to make the web app startup experience feel a lot more like a real iphone application.

I believe the syntax is like this:

<link rel="apple-touch-startup-image" href="/splash.png" /> (placed in the <head> section of the page).

Where splash.png is a vertically oriented 320x460 image.

I can't seem to get it work... does anybody have any tips and tricks for this?

Upvotes: 8

Views: 14346

Answers (7)

xmux
xmux

Reputation: 738

You are right, this code must be in section and the image must be 320x460 pixels, the reason why it is not working is the picture MUST be a small file like 20KB or 25KB or less. I had the same problem, but when i reduce the file that begin to work.

cheers

Upvotes: 0

kaleazy
kaleazy

Reputation: 6232

Every time I run into this problem it is almost always caused by calling more than one splashscreen for the same page or the splashscreen not being 320x460 pixels (exactly). This should do the trick:

<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />

But before calling the splashscreen, you should include these three lines of code as well:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Upvotes: 0

puppybits
puppybits

Reputation: 1110

You can only set one splash screen or else it will fail. In order to select either an ipad or iphone splash screen you need a little javascript.

The ipad landscape splash screen that can be used for native apps doesn't work for web apps. Neither would a retina splash screen for the iphone4. You can only choose an ipad or an iphone sizes splash. Setting the size attribute on the link element seems to work on the ipad. But having more than one splash image link element makes the iphone fail.

The splash screen sizes must be exact. 320x460 for iphone/ipod and 1024x748 for ipad. If you need a landscape slash screen you'll need to rotate it in photoshop as there is no control during the app's relaunch.

To test it's best to try first with app cache off and throttle the bandwidth with charles proxy or something similar. 

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

<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iphone start up screens -->
<script type="application/javascript">
    var appl = document.createElement("link");
    appl.setAttribute('rel', 'apple-touch-startup-image');
    if(screen.width < 321 && window.devicePixelRatio == 1) {
      appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
      //setting @2x or a 640x920 image fails, just use the iphone splash screen
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
      appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
      //landscape fails as well, use standard ipad screen
    }
    document.getElementsByTagName("head")[0].appendChild(appl);
</script>

<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />

Upvotes: 6

Knight Industries
Knight Industries

Reputation: 1481

iOS 4 does not show the splash screen if you have a notification bar at the top - e.g. when using the personal hotspot (tethering).

Upvotes: 1

james
james

Reputation: 11

Make sure all these links come after your other stylesheets in your header.

Upvotes: 1

Sebasti&#225;n Grignoli
Sebasti&#225;n Grignoli

Reputation: 33432

Make sure it is 320x460 pixels.

You already said that, but that was the solution for me.

Upvotes: 8

richleland
richleland

Reputation: 1442

Apple doesn't have much in the way of documentation on this topic (see this URL).

A couple of things to note:

  • The code snippet you provided assumes your image is living at http://yourdomain.com/splash.png
  • This only works for iPhone OS 3.0 and later
  • The image must be a PNG
  • The image is only displayed until the page's DOM is ready

You can also use the following code to explicitly set the web app icon:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Upvotes: 3

Related Questions