Sencha/Phonegap app doesn't fill full screen in iPhone 5

Question

I'm building a Sencha Touch app and wrapping it in PhoneGap (build) for native use.

My most recent build, when ran on an iPhone 5, has black, horizontal bars on the top and bottom of the screen. iPhone 4 is fine. There is hardly any difference between this version and the version that ran just fine before downloading the new build -- and the differences should only affect user accounts.

I'm using Sencha CMD v4.0.2.67, Sencha Touch v2.3.1 and PhoneGap v3.3.0 to build the application.

Holism

Answer 1

you need to add splash screen for iPhone 5 with this size 640 x 1136 pixels After that clean and the build and run the App again I think you will get the full screen

Budgerigar

It does work. We were wondering why some of our apps were fine while others were not. Adding the missing iPhone 5 splash screen fixed it. – Contribution

Yeah, It blows my mind that the splash screen is what sets the standard for fullscreen, but it works! – Holism

Answer 2

You need to add Splash Screen with resolution 640x1136 and name "[email protected]" to [project-dir]/resources/loading. If this wouldn't help, try adding this file directly to [project-dir].

Finstad

This is the correct answer. The filename must be [email protected]. – Wurst

Answer 3

I have searched a lot for this fix, following worked for me

If you are building app with Sencha CMD, create a png image with resolution 640X1096 rename it to Default-568h@2x put the png image in resources/loading folder. It will fix the issue.

Nidus

Answer 4

Adding a Splash Screen solves the issue.

You have to addd where the file is sitting in the root (same as where you have the config file). It is kinda funny when the size of the splash screen defines the size of the app which it operates all though out.

Statant