About Sencha Touch 2.x, PhoneGap/Cordova, and the iOS 7 Status Bar

arch1Well, the zany think-tank at Apple sure does seem to enjoy making our lives as cross-device mobile app developers exciting.  And by ‘exciting,’ I mean ‘Oh God, Oh God, WE’RE BLOWING OUR DEADLINE!!!’

Their latest attempt to ‘Think Different’ resulted in changing the behavior of the iOS status bar. In prior versions of iOS, your phonegap-based app ran directly underneath it. However, in iOS 7, your phonegap-based app actually runs ON TOP OF IT as illustrated by the screenshot at right.

So… that, uh.. sucks.

To resolve this issue, I came up with the following hacks:

1) In your index.html file, add the following code to your deviceready handler:

document.addEventListener("deviceready", function() {
  if (parseFloat(window.device.version) === 7.0) {
    console.log('iOS7 is the official OS of SATAN!');
    document.body.style.marginTop = "20px";
  // other phonegap related stuff

Next, you’ll need to modify the launch() function in your Sencha Touch app.js file to reduce the size of the viewport by 20 pixels:

 // bunch of code omitted for brevity...
 name: 'ArchSTL',
 isNative: true,
 launch: function() {
  if (Ext.os.is.iOS) {
    if (Ext.os.version.major >= 7) {
       if (ArchSTL.app.isNative) // manual flag to denote "native" mode
        Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
  // other stuff

Ultimately this solves the problem, and you can even set the background color of the status bar by tweaking the body background color CSS style in your index.html file. In this case, we set it to the client’s complementary app color to try and reinforce their branding standards.

Here’s the final result:


But hey, if it was easy, everyone would be doing it…right?

8 thoughts on “About Sencha Touch 2.x, PhoneGap/Cordova, and the iOS 7 Status Bar

  1. Pingback: The HTML5 Scorecard: The Good, The Bad and the Ugly in iOS 7 | SDK News

  2. Loutilities

    For me, that put’s the margin gap on the bottom of my app because the window.device.version is null. I had to do a UA lookup instead: if(navigator.userAgent.match(/iP[ha][od].*OS 7/)

  3. Toufic

    Hi , i have applied this solution and it is working fine with me , but i am facing a problem that the status Bar Background is shifted up when the Virtual Keyboard is opened, any idea how to make the Status Bar Background fix in it’s position when the virtual is opened ?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s