There is an important difference in the way the virtual keyboard behaves and affects available screen space in browsers on iOS and Android smartphone and tablet devices. There have been multiple issues raised in the past in relation to the way the iOS devices provide virtual keyboard compared to Android. Some users are confused and sometimes this looks like a limitation of the UI framework.
Usually, it is expected that browsers behave almost identically on Android and iOS but this is not always so. Here is some important information developers and users need to know about how the virtual keyboards affect the viewport in browsers on both platforms.
Android
When a virtual keyboard is triggered
What happens when a user triggers the virtual keyboard on an Android device, is that the viewport dimensions are updated and the UI code can react to the decreased dimensions.
Interaction with UI while the keyboard is shown
In order for the user to continue interacting with the UI while the keyboard is shown, scrolling up and down should be performed because only the viewport has been shrunk.
iOS
When a virtual keyboard is triggered
On the contrary, in iOS devices, when the virtual keyboard is shown, the viewport size does not change. The virtual keyboard is displayed as an overlay, so a large portion of the screen will be hidden behind the keyboard panel.
Interaction with UI while keyboard is shown
If a user wants to interact with the UI while the keyboard is displayed, the keyboard should be first closed via a special button for the purpose. This should be done because some important portions of the UI might happen to be below the keyboard and therefore inaccessible until the keyboard is closed.
A code sample
A code sample is available at http://output.jsbin.com/xonabu.
It can be opened using an Android or an iOS browser for monitoring changes to viewport size while displaying and hiding the virtual keyboard. Check the following images for preview if you don't have a mobile device at hand.
