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.

You might find this post of some use - http://stackoverflow.com/questions/6582732/what-does-apple-mobile-web-app-status-bar-style-do — David Randall, Nov 12 '13 at 17:02
are you creating pages dynamically? are you fixing the header? `data-position="fixed"`? I guess this could solve the problem, if not, try this `$(document).on("pageshow", function () { $.mobile.resetActivePageHeight(); });`. — Omar, Nov 12 '13 at 17:20

score 5 · Accepted Answer · edited May 23 '17 at 12:15

5

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.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 12 '13 at 19:07

zk_mars

1,339
2
15
36

Thanks for the idea. I will try this solution (this might take me some time though). – opalenzuela Nov 13 '13 at 09:28
You are welcome. This might take you some time? I am using this with Cordova 3, iOS7. It should work. And you just have to replace the **void** in the **MainViewController.m** file. It takes like 20 seconds for me ;) – zk_mars Nov 13 '13 at 15:36
With the JS option, what happens when you start scrolling? When I scroll, my page can now be seen bouncing up to the header bar again. – Dave Voyles Jan 07 '14 at 20:07
1

@DaveVoyles I've only been using the Objective-C solution. Like I mentioned in my post at the bottom the JS one does not work for me. But I'll try the JS func again as soo as I'm on workplace mac. – zk_mars Jan 07 '14 at 21:24
Thanks Lemon, I'll try that Objective-C solution then – Dave Voyles Jan 08 '14 at 19:47

score 1 · Answer 2 · answered Mar 16 '14 at 11:30

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.

score 0 · Answer 3 · answered Feb 09 '15 at 11:42

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");

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

3 Answers3

#1 MainViewController.m

or

#2 custom JS