getting some extra blank space in iPhone 5 in my phonegap application

Question

I am working on a application using phonegap. I have tested the app in different device like nexus tab, Samsung galaxy s4, Samsung s2, iPhone 4, iPad. Everywhere the app is running fine as i am wanting. In my app their is a header and footer. Its position is fixed in top and bottom. But when i am running the same on my iPhone 5 device there is some extra spaces above header and below the footer.

In my given screenshot you can see there is a extra spaces (before green battery signal just above my header in the right corner). There is Some extra spaces after the footer as well.

Can you tell me how to fix this issue?

And there is another problem like there is a form in my application.There is fixed header and footer and in the middle there is scrollable form. When I am clicking on a text field a keyboard appear in my screen and the footer is coming just above it for it I can hardly see what i am writting in the text field and i cant see any header in the screen. But I am facing this problem only in iOS. in android I can easily see where i am typing and what i am typing by scrolling the form and header and footer is still visible there.

So can you tell me how to fix this issue for iOS. Thanks in advance.

Answer 1

If your app doesn't include the Default-568h@2x.png file then it will displayed with that black space. Include the Default-568h@2x.png in your project.