I have private messaging functionality on my website. The message window is a fixed element:
position: fixed;
bottom: 0;
On iOS, when opening the input located at the very bottom of the messaging window, the keyboard simply pushes the whole website to the top so that you can still see what you are typing.
However, on Android, the keyboard simply overlaps everything so you don't see the input element any longer:
What can I do to make it work on both iOS and Android?
One way to do it is store the initial window(viewport) height and compare it on window resize event. Assuming that window size won't change on the smartphone in like 99% of situations, you can assume that the keyboard is being shown. But, for me, it's kinda hacky
Once you get the actual size of the viewport, you only need to update the bottom:x value of your element.
If you're asking if you could detect it only with css, then you might want to look into css media queries.