15

A known problem if you are using percentage (or viewport unit) width and height for <body> is that when mobile keyboard invoke due to input the size of any percentage/viewport element will change .

I've searched a lot about this problem and nothing could really help.

I found one of the answer is to adjust the layout according to the new viewport : mobile viewport resize due to keyboard

but this is not really practical.

Does anybody know how to manipulate mobile keyboard on web ?

After some test's I found a hack that i'll put in the answers, if there are better ways, please tell :)

Dharman
  • 30,962
  • 25
  • 85
  • 135
shamaseen
  • 2,193
  • 2
  • 21
  • 35

1 Answers1

24

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.

Rob Kwasowski
  • 2,690
  • 3
  • 13
  • 32
shamaseen
  • 2,193
  • 2
  • 21
  • 35
  • 8
    man thx!. That was a nightmare until I found your answer. I dont give a s*** if my comment gets deleted because it is not 'used to ask for clarification or to point out problems', I just want to thank you. – douche_satan Nov 17 '18 at 19:16
  • 5
    Thanks! Let me add that you can wrap this inside a window resize so it adjusts everytime you resize the screen: window.onresize = function (event) { // resize code here }; Might be useful if you are working with different viewports. – atfede Aug 13 '19 at 17:53
  • 17
    This just stopped me quitting development and going to work on a farm. – andydavies Aug 24 '20 at 14:55