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.
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.
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.
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.
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 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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
34 | |
25 | |
12 | |
7 | |
7 | |
6 | |
6 | |
6 | |
5 | |
4 |