Home/ Questions/Q 6661217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:15:08+00:00

I’ve made a simple iPhone webapp and I’ve set a startup screen and icon

  • 0

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???

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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); 
  }
});
    • 0