How to stop soft keyboard resizing Chrome browser window on Android mobiles?

user_1446498 0
Viewed 8549

I see this question asked here, here, and here, but could not find a clear and/or workable answer. I'm using Android 9 on a Samsung A7 (2018), running Chrome 75.

What happens. I have a html form requiring keyboard input. When opened in Chrome and input is attempted, the keyboard forces the form to resize. The resizing reduces the form to about 50% of the screen height and also resizes the form width and the width/height of input fields. Any text typed is not visible until the keyboard is dismissed and the form returns to normal size. The resizing does not happen in Firefox Focus - the keyboard slides up and over the bottom half of the form, leaving the form at 100% size.

Update 2019 - Solution! I found the answer to my question about Chrome in a question here about the very same problem, but in Firefox (which isn't a problem any more, at least not now with Firefox Focus 9).

android-softkeyboard google-chrome android html
2 Answers

its an andriod issue where the softkeyboard changes the viewport height...currently working on the same issue...this looks promising, about to implement...it sets the viewport content to explict px values

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

edit: worked like a charm

user_98430070

Fixing the height alone should do. The code below does not use jQuery.

setTimeout(()=>
   document.querySelector("meta[name=viewport]").setAttribute("content", "height=" + screen.height*0.9 + "px, width=device-width, initial-scale=1.0")
, 300);

I need to lower down the height to fit my case.

user_26912260
Related