How to get keyboard and bottom bar height on iOS Safari?

Question

css

Good afternoon, colleagues!
I'm trying to responsively layout the site, but I'm faced with the fact that I don't understand how to find out the height of the keyboard and bottom bar on iOS Safari. There is no problem with Chrome on Android -- the viewport height is recalculated when the keyboard is on the screen. But for some reason Safari doesn’t want to, and my content goes under the keyboard or the bottom bar.
What to do? How to find out their height? Hardcoding is not an option, alas.

Answer 1

I myself suffered with this problem. On iOS, the keyboard does not affect the window size and viewport in any way. It simply opens on top of the window and the page can, as it were, scroll up if the place where the text is entered is in the place where the keyboard appears. Moreover, it scrolls onto the page (html, body tags), and who knows what, because the scroll event was not caught.
I had to get out like this, I caught the focus event on the input fields (in general, on everything that causes the keyboard to open), and by setTimeout of 500ms (the keyboard appeared smoothly and it was possible to correctly calculate its size only after opening) I did the following

const innerHeight = window.innerHeight;
document.body.style.height = innerHeight + 'px';
document.documentElement.style.height = innerHeight + 'px';
window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил

the solution is not wow, and the timeout also fails if the interface suddenly slows down and the keyboard appears with a slightly longer delay, but unfortunately I didn’t come up with another
Well, accordingly, when you close the keyboard (blur of the same field), you need to reset the applied styles

document.body.style.height = '';
document.documentElement.style.height = '';