JavaScript detect when IOS browser addres navigation show up

Question

I have two buttons fixed to the bottom of my website. In IOS this has some unwanted behaviour: When the user taps the button, the "bottom browser bar" and "address bar" show up.

Is there a way I can detect if these browserbars are "visible" or "hidden"? So I can adapt the button positions to it?

In the state the bars are visible I added some extra bottom marges so they are on top of the bottom bar. But I want to adjust this when the bars hide.

I tried "onresize" and altough this event fires when the bar show or hide the $(window).height() stays the same. So I can not detect with this method if the screen has become bigger or smaller.

Does anybody know a solution?

Answer 1

The innerHeight of the page will change depending on whether the top bar is visible. On the iPhone 6 Plus, the innerHeight of the page is 628 when the top nav is displayed and 696 when it's not.

You can use the onresize function to determine how the innerHeight has changed.