Android Keyboard shrinking the viewport and elements using unit vh in CSS

I know this is an old question, but I had the exact same problem in my app. The solution I found was fairly simple. (My app is in Angular so I put this in the app.component’s ngOnInit function, but document.ready() or any other “initialization complete” callback should work just fine with the proper experimentation)

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 forces the viewport meta to explicitly set viewport height, whereas hardcoding

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

doesn’t work because the device-width and device-height change when Android’s soft keyboard is opened.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)