Note that there are some explanatory texts on larger screens.

plurals
  1. POFitting height of homescreen-webapp for iphone 5
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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