html - Webapp on iphone 5 shows wrong height

Question

I always get the wrong measurements of my webapp. It is 320x460 even though I'd expect it to be 320x548.

I'm using following metatags:

<meta name="viewport" content="initial-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">

So I'm not sure what I'm doing wrong.

Answer 1

This may help you -

standard viewport tag to set the viewport to the device's width Android 2.3 devices need this so 100% width works properly and doesn't allow children to blow up the viewport width

<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />

width=device-width causes the iPhone 5 to letterbox the app, so we want to exclude it for iPhone 5 to allow full screen apps

<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />