iOS 7 Safari nav bar height offset

Question

So in iOS 6 and earlier, the nav bar at the bottom of Safari was fixed in portrait mode and didn't disappear. So if you wanted a 100% height document to be true full screen you had to add an extra 60px so that you could scroll it up and hide the address bar.

Now in iOS 7 with the disappearing nav bar and the resizing address bar, how would you go about creating a 100% height document? In other words, I want to be able to scroll the document up so that the nav bar disappears, the address bar resizes down to the mini version and the document height would then fill the remainder (window height minus 100px or so) so that you couldn't scroll any further.

Does [this](http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems#answer-15717609) help at all? — Ojame, Sep 23 '13 at 04:20
IOS7 Safari doesn't fire the resize event when the browser footer appears and disappears, so you may be out of luck. I'm sure the jquery mobile team is working on a workaround, but for now you may just have to reconsider your approach. — Blazemonger, Sep 23 '13 at 04:30
See also [this article](http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review). — Blazemonger, Sep 23 '13 at 04:31

score 9 · Answer 1 · answered Sep 25 '13 at 07:00

9

It looks like the conventional method of simply adding the extra height still works, but now it seems the value to add is 69px instead of 60px.

answered Sep 25 '13 at 07:00

Bobe

2,040
8
29
49

Awesome. This small fix from 60 to 69 worked for the issue I was having. – lislis Oct 03 '13 at 16:36

score 5 · Answer 2 · edited Dec 18 '13 at 09:06

5

In iOS 7.x beta there is a new meta attribute called "minimal-ui", which looks like it will provide this functionality without any hacking.

Thread here (scroll down to Safari)

This is a future feature so may not help you

edited Dec 18 '13 at 09:06

Parth Bhatt

19,381
28
133
216

answered Dec 18 '13 at 08:46

matthewbeta

696
1
7
17

score -1 · Answer 3 · answered Oct 25 '13 at 14:17

As a work around to the missing resize() event:

var windowInnerHeight = window.innerHeight;

setInterval(function() {
    if (windowInnerHeight != window.innerHeight) {
        windowInnerHeight = window.innerHeight;
        resize();
        window.scrollTo(0, 0);
    }
}, 500);

iOS 7 Safari nav bar height offset

3 Answers3