Android Keyboard Shrinking the Viewport and Elements Using Unit Vh in CSS

Mobile keyboard changes html viewport size

Use JavaScript/jQuery to set the height and width of <body> in px.

Using this code:

$(function() {
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    $("html, body").css({"width":w,"height":h});
});

In this case <body> will be set in px according to the viewport size and will stay constant with any changes to the viewport.

If the keyboard covers the input you can easily change the position of the input to fixed and top to 0.

mobile keyboard resize viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Try this piece of html. I'm using it for every of my pages and it always did what it should. Maybe yours isn't working because of the missing minimum-scale attribute.

Get viewport height when soft keyboard is on

In the view I wanted to take the height of the remaining screen after the virtual keyboard was on, I was using an absolutely overflown element that covered the whole screen using screen height and the content of the whole page was inside of it. As a result, the virtual keyboard was opening on TOP of the overflown element, without changing its dimensions.

To fix the specific problem, all I had was change the position of this element to static and remove the overflow when the virtual keyboard was opened - actually ios changes to THIS behaviour by default when issuing he virtual keyboard (changes elements to static position) and this is why the fixed elements become static.

I hope this helps.

CSS3 100vh not constant in mobile browser

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
https://developers.google.com/web/updates/2016/12/url-bar-resizing

How to keep layout unchanged when keyboard is displayed?

You have to change to value for android:windowSoftInputMode in the AndroidManifest.xml.

Go to your platforms/android/ folder.
Open AndroidManifest.xml file
In the <activity>element change the value for android:windowSoftInputMode from "adjustResize" to "adjustPan"

Documentation for further reading can be found here.

I would also recommend to use UI Frameworks like ionic and adding cordova-plugins like ionic-plugin-keyboard for e.g. better keyboard handling (Cordova UI docs).