Recently we had a feature in which we had to make an animation on our header only when the keyboard on mobiles devices has been displayed so that we can decrease the size of the header and make more space for the user on the screen.

I think there is no standard way to do this. The options were either listen for input focus events and based on them to apply our changes, or resize events where some height calculations could be made to achieve the wanted behaviour. However, both options have their drawbacks:

• with focus event we are trying to fight the browser's default behaviour when the keyboard pops up. This being the case the solution seems a little patchy.
• with the resize event there are some problems on iOS devices

Does someone know another way of detecting that the mobile keyboard is displayed?