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

Answer 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.