How to adjust the page header to work properly in iOS6 and iOS7?

Question

The new iOS7 status bar overlaps the header of my application, and the navigation buttons are partially covered. However, it looks beautiful in iOS6 and I refuse to just add a margin/padding for iOS7 and breaking the appearance for the previous version.

Is there any clean solution (something like an exclusive selector) that can make it work in both systems?

What have I tried?

As I said, I managed to solve it on iOS7 adding some extra margin to the header (altough formatted by jQueryMobile), but this changes also affect the view in iOS6. I'm sure there is some other trick that I'm missing, but google didn't give me the answer yet.

Thanks in advance.

Answer 1

There is a simple solution. It won't break the appearance of the Application on iOS6 since it only applies to ios7>

#1 MainViewController.m

You can use this In your MainViewController.m , look for - (void)viewWillAppear:(BOOL)animated and add the if function:

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    //Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

from here: iOS 7 status bar overlapping UI

or

#2 custom JS

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}

you'll need device plugin for this. but the second does not work for me. The #1 on the other hand works like a charm.

Answer 2

Here is the solution I ended up going with. I have a multi-page JQuery Mobile setup, so I couldn't just insert a div at the start of the body -tag (as this would only show up on the first page). Also, I wanted the color of the header to be displayed behind the iOS7 status bar. The pages of my app have different color schemes, so I couldn't just put in an extra div with a fixed background color. Instead, I increase the padding of elements with the role header when I detect iOS7:

Javascript:

//take iOS7 transparent menubar into account
if (parseFloat(window.device.version) === 7.0) {
    $('[data-role="header"]').addClass("ios7");
    $('.ui-btn-left').addClass("ios7-header-button");
}

css:

.ios7
{
    padding-top: 20px !important;
}

.ios7-header-button
{
    margin-top: 20px !important;
}

The padding for the .ui-btn-left is to lower any buttons of that class that I have in my header; jQuery Mobile's formatting magic seems to ignore the padding of the header itself and just places the button halfway under the iOS7 status bar.

Answer 3

I added the padding to the header in HTML.

<div data-role="header" data-position="fixed" data-theme="b" style="padding-top:20px;">
    <h1 id="page_title">Title</h1>
</div>

In JavaScript I added the margin to the button.

$(".ui-btn-left").css("margin-top", "20px");