It's quite simple really... The soft keyboard operates independently from the browser and cannot be manipulated by any elements within the browser itself.
Both Android and iOS handle the soft keyboard differently, making it challenging to create a universal solution that works seamlessly across devices.
On iOS Safari, the browser window remains fixed in size as the application window is pushed upwards, concealing the top portion of the device screen. This means that utilizing a position: fixed;
footer should function as intended while headers are pushed off-screen. (Using fixed
positioning is preferred over absolute
since its reference point is always the WINDOW.)
In practical terms, the behavior of fixed positioning may vary depending on the iOS version. However, starting with iOS version 12, you can employ JavaScript to monitor changes in window.innerHeight
and apply a new class when adjustments occur.
In Chrome on Android, the browser window's height appears to be physically altered, allowing for the use of screen size media queries
to position elements effectively.
Ultimately, due to the multitude of device/OS/screen combinations out there, thorough testing is crucial. It's important to recognize that achieving a one-size-fits-all solution may not be possible.