PhoneGap keyboard not pushing up webview

Question

I'm experimenting with PhoneGap, and my HTML starts with:

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height" />

Later in the HTML I have an input text field. Normally, web view scrolls up when the input field gets focus and the keyboard is shown. However, in my case the keyboard covers the view and it does not scroll up (as I want it to).

If I remove the above <meta name="viewport" ...> tag, the view does scroll up but also sideways and also becomes scalable (which I don't want).

How can I get the desired behavior of keyboard (and only keyboard) pushing the view up (and only up) on both Android and iOS?

EDIT

I've found a similar case in Get viewport height when soft keyboard is on -- I also have some fixed div with width and height set 100%:

    .main {position:fixed; top:0; left:0; width:100%; height:100%;}

However, if I simply modify the positioning to static, the view is not "pushed" up but rather "squeezed" up... Not the desired behavior.

I did (try to remove only the height declaration), but it seems to behave similarly. Note I'm using this PhoneGap app (for testing) on Android. — Free Bud, Sep 06 '17 at 09:54
I suppose you refer to the config.xml file? Given the above HTML, this line doesn't seem to change... — Free Bud, Sep 06 '17 at 11:33

score 0 · Answer 1 · answered Sep 06 '17 at 12:43

I think I found what happens, and also a nice workaround:

In some other part of my code, there is a function that runs every second, sampling window.innerWidth window.innerHeight for testing the screen orientation (profile vs. landscape). It also assigns these new values to the main div width and height.

The "trick" I made consisted of two parts:

Detect (almost) whether the virtual keyboard is "on" or "off" by assigning "focus" and "blur" events to the input text field.
When "on", use only half of the sampled window.innerWidth window.innerHeight, so the actual content is nicely shrinked into the upper-left corner with the keboard below.

PhoneGap keyboard not pushing up webview

1 Answers1