Want to have browser viewport resize when iOS keyboard is activated

Question

In iOS web browsers (Safari, Chrome, etc.), when you click into an input field and the keyboard displays, it keeps the viewport the same size but slides it up partially out of view. This makes creating app-like websites very difficult, as I'm coding a chatting app and when the keyboard shows I want to keep the conversation completely in view, but simply resize the conversation area to fit in the new "resized" viewable area.

I've tried everything, such as having the conversation area be absolutely positioned with left: 0; right: 0; top: 0; bottom: 0, but still iOS keeps the viewport the same size and pushes it up and partially out of view.

Is this possible? Or is it system-level functionality that is beyond control of CSS or JavaScript?

Answer 1

The simple answer is... The soft keyboard is separate from the browser and cannot be controlled by anything inside the browser itself.

Android & iOS both treat the soft keyboard differently so writing something to work across devices is going to be difficult.

iOS Safari doesn't change the size of the browser window. It actually pushes the entire application window up hiding the top portion off the device screen. So, in theory a position: fixed; footer should function the way you expect while headers are pushed up out of sight. (Position fixed is preferable over absolute as its reference point is always the WINDOW.)

In practice it seems to depend on the version of iOS for how fixed positioning actually works. However, as of iOS version 12 you can use javascript to watch changes to window.innerHeight and add a new class when things change.

Chrome on Android seems to physically change the height of the browser window so screen size media-queries might be enough to position things in this case.

As always, there are so many device/OS/screen combos that you should test as much as possible and be aware that you're probably never going to solve for all of them.