How to determine the dimensions of the iOS keyboard in Mobile Safari

Question

I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.

To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.

I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.

Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?

Answer 1

Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.

To determine that the keyboard is showing, you can use this solution: iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.

If someone has a better hack, I'd really love to hear about it.