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

do you mean iPhone 4 (Retina) in the first start-up image link? — Crashalot, May 28 '13 at 00:30

score 7 · Answer 1 · answered Jul 12 '13 at 19:05

7

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.

answered Jul 12 '13 at 19:05

user2577633

71
1
3

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

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

;)

edited May 23 '17 at 12:27

Community

1
1

answered Jan 14 '13 at 18:58

Marco Allori

3,198
33
25

7

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. – gillesruppert Apr 24 '13 at 08:41
This solution does not fix the issue – Roland Jun 19 '13 at 13:33
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. – BananaAcid Sep 13 '13 at 02:36

Daniel · Answer 3 · 2013-08-19T17:14:49.947

0

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

edited Aug 19 '13 at 17:14

answered Aug 19 '13 at 00:54

Daniel

304
2
12

score 0 · Answer 4 · answered Aug 23 '13 at 15:53

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

score -1 · Answer 5 · edited May 23 '17 at 10:32

-1

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

edited May 23 '17 at 10:32

Community

1
1

answered Jun 19 '13 at 13:51

Roland

9,321
17
79
135

Fitting height of homescreen-webapp for iPhone 5

5 Answers5