How to resize web view when keyboard appears on iOS (Cordova)

Question

On Phonegap 3.7.0, when the keyboard appears on iPhone or iPad, the web view is not resized, and the keyboard ends up above the footer. I would like the web view to be shrunk so that the footer would remain visible. Is there anyway to fix this?

I've seen a lot of questions here to actually achieve the opposite, but that was with previous versions of Cordova/Phonegap.

FYI, I tried the following: resize the body when the keyboard appears (I use the Ionic keyboard plugin to know when it is shown and it's height) and change the bottom value of my footer. This does work on iPhone 6.1.3, but not on iPhone/iPad 8.*. Even if the body is smaller, the body is still scrollable, as if it still was 100%. I tried removing my meta tag content with width=device-width, but it didn't change anything.

Answer 1

One option is to use a plugin to shrink the native WebView. Add cordova-plugin-keyboard to you project:

phonegap plugin add cordova-plugin-keyboard

then in your config.xml add

<preference name="KeyboardShrinksView" value="true" /> 

or call this method in your javascript

Keyboard.shrinkView(true);