Iphone only app on Ipad shows a blank white bar on the top

Question

I have an iPhone only app using sencha touch and cordova which is fully functionally without any issues on iphone. When I run it on an Ipad - it shows me a blank white screen on the top where the status bar is usually shown. It scales to the proper height which is 460px but there is a white bar on top. It does not appear when I run it on iPhones or even iPad simulator - only when I run it on an actual IPad device the white bar appears and is seen on all pages. Any one has any idea how can I get rid of this white bar? I tried setting the viewport as well in index.html but that does not work either.

<meta name="viewport" content="initial-scale=1.0">

Also tried

<feature name="StatusBar">
            <param name="ios-package" value="CDVStatusBar" onload="false" />
        </feature>

in cordova config.xml but was of no use.

Apart from this the entire app works fine without any issues.

Answer 1

After struggling a lot for two days I finally found an answer. Since my project was using cordova status bar plugin I could customize the status bar by tweaking my index.html. So for anyone who faces the same issue where-in an iPhone only app displays a blank white status bar above your app page here's the link that could solve your problem :http://www.joshmorony.com/take-complete-control-of-the-ios-status-bar-with-phonegap-build/

So all I had to do was add the line StatusBar.backgroundColorByName("black") in my index.html. So the status bar shows up in black and merges with the background black color while the app is visible perfectly. The downfall of this was that even on iPhones my status bar would appear with a black background which I didn't want so I had to put an if condition to check the device types. Here's my entire code which solved the issue :

<script src="touch/sencha-touch-all.js">
    </script>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
    <script>
    document.addEventListener('deviceready', function() {
        setTimeout(function() {
            navigator.splashscreen.hide();
            //StatusBar.styleDefault();
            if(Ext.os.is.Tablet)
                {
                    StatusBar.backgroundColorByName("black");
                }
            else
            {
                StatusBar.styleDefault();
            }

        }, 1000);
    });
    </script>