JavaScript Detects When Navigation Appears in IOS Browser Browser

Question

I have two buttons fixed to the bottom of my site. On iOS, this has some undesirable behavior: when the user clicks the button, the "bottom browser bar" and "address bar" appear.

Is there a way to determine if these browsers are “visible” or “hidden”? So that I can adapt button positions to it?

In the state of visibility of the bars, I added some additional lower margins so that they are on top of the bottom panel. But I want to set this up when the bars are hiding.

I tried "onresize", and if this event fires when the bar shows or hides $ (window) .height (), it remains the same. Therefore, I cannot detect this method if the screen has become larger or smaller.

Does anyone know a solution?

Answer 1

innerHeight page will change depending on whether the top bar is visible. On iPhone 6 Plus, the innerHeight page displays 628 when the top navigation bar is displayed, but 696 does not.

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