This question may be old, but I recently faced the same issue in my application. After some trial and error, I discovered a straightforward solution. (I implemented this in the ngOnInit function of my Angular app.component, but using document.ready() or any other initialization callback should yield similar results with some tweaking)

setTimeout(function () {
        let viewheight = $(window).height();
        let viewwidth = $(window).width();
        let viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0");
    }, 300);

This code snippet ensures that the viewport meta tag explicitly defines the viewport height, as opposed to hardcoding it like so:

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

The hardcoded version fails to account for changes in device-width and device-height when Android's soft keyboard is activated.

After considering Tyler's inquiry, here is a simplified version of the script that appears to be more streamlined:

addEventListener("load", function() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);
})

If you insert it following the meta tag declaration, you can even eliminate the need for that addEventListener:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);

Here's a comprehensive solution that considers changes in screen orientation:

// Updated viewport definition with an "id" for later modification:
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<script>
// Global boolean variable to track current orientation
var pageInPortraitMode;

// Listen for window resize events to detect orientation changes
window.addEventListener("resize", windowSizeChanged);

// Set the orientation variable when the page loads
addEventListener("load", function() {
  pageInPortraitMode = window.innerHeight > window.innerWidth;
  document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
})

// Update viewport values only on orientation change
function windowSizeChanged() {
  if (((pageInPortraitMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraitMode === false) && (window.innerHeight > window.innerWidth))) {
    pageInPortraitMode = window.innerHeight > window.innerWidth;
    document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
  }
}
</script>

Recently, I encountered a similar issue and spent some time finding a satisfactory solution. In developing a cordova app with html5, css3, and angularjs, my goal was to ensure that the app would be responsive across all screen sizes without resorting to excessive media queries and convoluted css. Despite starting off with viewport and vh units, I found that the keyboard functionality disrupted everything.

The key is to incorporate a simple snippet of javascript (using jquery in this case) like so:

$("html").css({"font-size": ($(window).height()/100)+"px"});

By implementing this code, you can now utilize "rem" in the same manner as "vh", while keeping the font-size unaffected by viewport changes. The "rem" unit is solely based on the root font-size of html, which we set to 1% of the screen height using jquery.

I hope this explanation proves helpful!

UPDATE 1: Upon encountering a new challenge, I wanted to share my workaround here. It's worth noting that most smartphones have a minimum font-size limit. To address this, adjust all rem values by dividing them by 3 or 4 accordingly. Furthermore, modify the javascript as follows:

$("html").css({"font-size": ($(window).height()/25)+"px"}); /*(assuming division by 4)*/

If you utilize SASS, creating a custom rem function can simplify this process by handling the division automatically.

Although it's been almost a year since this issue was raised, I feel compelled to share my solution to this increasingly pressing problem.

I devised a simple JS function called SET that loads after the completion of the DOM.

Any element assigned to a specific class (such as ".pheight") will not be resized when the viewport height decreases. It will only resize if the viewport height increases or if the viewport width changes.

Fortunately, in my applications, this method works flawlessly!

  var docwidth = window.innerWidth;
  var docheight = window.innerHeight;
  function pheigt_init() {    
    pheigt_set_prevent_height();
    window.onresize = function() {
        if (docwidth !== window.innerWidth || docheight < window.innerHeight) {
            pheigt_upd_prevent_height();
        }
    };
  }
  function pheigt_set_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
     node.style.height = node.offsetHeight + 'px';
    });
  }
  function pheigt_upd_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
        node.style.removeProperty('height');
    }); 
    setTimeout(function(){ pheigt_set_prevent_height(); }, 100);
    docheight = window.innerHeight;
    docwidth = window.innerWidth;
  }
  document.addEventListener('DOMContentLoaded', pheigt_init());

If you are working with Angular 4 or newer,

import {Meta} from "@angular/platform-browser";


constructor(private metaService: Meta){}

ngOnInit() {
  this.metaService.updateTag({
    name: 'viewport',
    content: `height=${this.height}px, width=${this.width}px, initial-scale=1.0`
  },
  `name='viewport'`
);
}

One possible solution is to utilize the % unit, which appears to be unaffected by this particular issue. Another option could be using vw for width (since it's not affected for obvious reasons) or even for height as well.

It might be necessary to update the viewport height (or just height) using a function.

const reference = useRef();

function adjustKeyboard(){
    setTimeout(
        ()=>{reference.current.querySelector("#win").style.height = "calc(100vh)"}
    ,2000)
}

return (
    <ref={reference} div>
       <input type="text" id="win" onFocus={adjustKeyboard} onBlur={adjustKeyboard}/>
    </div>
)

In my PWA, I have disabled scrolling and zooming to create a specific layout using viewport units. However, I encountered an issue where the window.onresize event is triggered when the android keyboard pops up. To address this, I check if the keyboard is active by verifying if document.activeElement is a textarea or input field.

An inconvenience arises when the user changes screen orientation while the keyboard is in use, causing the viewport resizing to fail. As a workaround, I blur the element to close the keyboard before any layout issues occur. While not ideal for user experience, this scenario is considered a rare edge-case.

Below is the final code snippet:

window.onresize = () => {
    if(document.activeElement.tagName !== 'TEXTAREA' && document.activeElement.tagName !== 'INPUT'){
        setViewportSize();
    }
}

window.onorientationchange = () => {
    // check if keyboard is used
    if(document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT'){
        document.activeElement.blur();
    }
    setViewportSize();
}

function setViewportSize(){
    document.documentElement.style.setProperty('--screen-width', `${window.innerWidth}px`);
    document.documentElement.style.setProperty('--screen-height', `${window.innerHeight}px`);
}

Note: The use of window.onorientationchange is deprecated and may become ineffective in the future.