Fitting height of homescreen-webapp for iPhone 5

Question

I have a problem with fitting the height of a webapp (homescreen). Im using following meta-tag:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

My problem is, that the screen has black bars on top and bottom. First I thought, that this is a bug of iPhone 5 because of the higher screen. But today i saw a webapp (apps.ft.com/ ) , which fits perfect into the iphone5 screen.

Any ideas, what am I making wrong?

here my full relevant meta-tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">

EDIT: After an hour of searching i found the solution how to force the browser to fit on full height. My iphone only fits the height, when i define a startup image (apple-touch-startup-image). Here my code:

<!-- iPhone 4 (Retina) -->
<link href="img/icons/apple-touch-startup-image-640x920.png" 
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" 
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="img/icons/apple-touch-startup-image-640x1096.png" 
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" 
      rel="apple-touch-startup-image">

Solution 1

I wrestled with this for hours too until I finally found that it was the "width" definition in my viewport metatag that was causing the issue! Removing width fixed the issue for me.

Solution 2

use this

<meta name="viewport" content="user-scalable=0, initial-scale=1.0" />

for startup-image and touch-icons read this Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

;)

Comments

[Crashalot]

do you mean iPhone 4 (Retina) in the first start-up image link?

[gillesruppert]

Although the answer has 3 up votes, the solution given is not right. The question explicitly talks about a homescreen webapp, where initial-scale=1.0 doesn't help to remove the black bars.

[Roland]

This solution does not fix the issue

[BananaAcid]

however - for me, it takes the full iphone 5 height and width - not the smaller iphone 3/4 screen sizes (removing the black bars, top & bottom) - not using a startup image.