CODEWITHSUNDEEP
iphoneweb-applicationssplash-screen
user990175
user990175

Reputation: 311

Iphone Webapp Startup Screen Delay

I've made a simple iPhone webapp and I've set a startup screen and icon and everything. Here's the link to it.

The problem I'm having is that when I save the webapp to the homescreen, a white screen (or else a screenshot of the page I have opened on Safari) shows up first for a few seconds before the startup screen.

I've added other iPhone webapps like JQtouch to my homescreen and opened them and the startup screen shows up straight away.

I'm wondering if I have something wrong in the html code???

Upvotes: 2

Views: 5146

Answers (1)

chown
chown

Reputation: 52738

Try changing <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> so the width=device-width and using commas (,) instead of semi-colons (;) except at the end of the line.

Do you have this in your <head>:

<link rel="apple-touch-startup-image" href="myImage.jpg">

See iOS Web App Configuration - mobile-meta-links.html for exact specs:

<!-- startup image for web apps - iPad - landscape (748x1024) 
     Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />

Also read that the startup image will only show up if you use the HTML5-doctype <!DOCTYPE html>

From Icons and splash screens for iOS web apps - retina displays also welcome:

To insert a high-resolution splash screen into the <head>, but only for iOS devices with a retina display running iOS5 or later:

function hasRetinaDisplay() {
  return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
  return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
  if(isAppleDevice()) {
      // Check the version
      var pattern = /iPhone OS (.*) like Mac/;
      var result  = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
      var version = result[1].split(''); // Returns X, Y
      var release = version[0];
      return (release >= majorVersion);
  }
  return false;
}

// When we're ready to go...
$(document).ready(function() { 
  if(hasRetinaDisplay() && iOSNewerThan(5)) { 
      var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />'; 
      $('head').append(highResSplash); 
  }
});

Upvotes: 2

Related Questions