Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fitting height of homescreen-webapp for iPhone 5

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">
like image 800
mr_app Avatar asked Dec 09 '12 21:12

mr_app


Video Answer


2 Answers

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.

like image 174
user2577633 Avatar answered Nov 12 '22 05:11

user2577633


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

;)

like image 20
Marco Allori Avatar answered Nov 12 '22 04:11

Marco Allori