4

I'm creating an iPhone standalone web app in iOS 7. I've specified a startup image, but it is always stretched vertically an extra 40px. I assume this is to compensate for the new transparent status bar style in iOS 7.

I'd like to specify an image that is 1136px high (full height of the iPhone screen) so it does not require stretching, but it doesn't work.

<link rel="apple-touch-startup-image" href="startup_640_1136.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

When I provide an 1136px tall image, nothing shows up. When I provide a 1096px tall image, it shows up stretched vertically, like the left side in this comparison image:

enter image description here

I drew the lines to illustrate how the image was stretched. Expected result is on the right, actual is on the left.

Nathan Manousos
  • 13,328
  • 2
  • 27
  • 37
  • Could this issue be similar to that of yours- http://stackoverflow.com/questions/19071414/change-the-color-of-the-ios-7-status-bar-in-safari-and-chrome ? – Subzero Oct 30 '13 at 02:25

1 Answers1

0

Size of the launch images on iOS7:

Portrait (Non-retina): 768x1024 px Portrait (retina, 2x): 1536x2048 px

Landscape (Non-retina): 1024x768 px Landscape (retina, 2x): 2048x1536 px

As you can see, your image height should be either 1024/2048 px (non-retina/retina) if portrait and 768/1536 px (retina/non-retina) if landscape.

Could you please tell as to why you have considered the heights 1136/1096px (these are not the heights that you need.)?

Subzero
  • 841
  • 6
  • 20
  • 2
    My numbers are for an iPhone. It looks like your numbers are for iPad. I believe the same problem exists on iPad, but I'm focused on iPhone for now. I've updated my original question to be more clear that I'm referring to iPhone. – Nathan Manousos Oct 28 '13 at 22:56