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

Sturgeon

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

does this edit codes fixed the issue? – Acclivity

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.

Faa

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

;)

Adjure

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. – Erupt

This solution does not fix the issue – Centum

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. – Fluting

Answer 3

I also had this issue and I solved it by removing width=device-width

Pepperandsalt

Answer 4

Completely removing the viewport width causes more problems than it solves. In order for webapps to have the correct viewport height, the viewport width needs to be greater than 320 (which, unfortunately, is the value that device-width reports to the browser). This is how I've updated my viewport meta tag:

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

Recite

Answer 5

Here are a few good answers for this issue, posted by others on the same topic:

• roviuser
• Vector

Centum