Databases
StackOverflow2013
Postsdbo
POFitting height of homescreen-webapp for iphone 5
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFitting height of homescreen-webapp for iphone 5
    text
    copied!<p>I have a problem with fitting the height of a webapp (homescreen). Im using following meta-tag:</p> <pre><code>&lt;meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&gt; </code></pre> <p>My problem is, that the screen has black bars on top and bottom. First i thoght, that this is a bug of iphone 5 because of the heigher screen. But today i saw a webapp (apps.ft.com/ ) , which fits perfect into the iphone5 screen.</p> <p>Any ideas, what im making wrong?</p> <p>here my full relevant meta-tags</p> <pre><code>&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt; &lt;link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png"&gt; &lt;link rel="apple-touch-icon" href="img/icons/ios_icon_52.png"&gt; &lt;link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png"&gt; &lt;link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png"&gt; </code></pre> <p><strong>EDIT:</strong> 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: </p> <pre><code>&lt;!-- iPhone 4 (Retina) --&gt; &lt;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"&gt; &lt;!-- iPhone 5 --&gt; &lt;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"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload