CODEWITHSUNDEEP
htmlcssmobilekeyboard
shamaseen
shamaseen

Reputation: 2478

Mobile keyboard changes html viewport size

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 :)

Upvotes: 16

Views: 27491

Answers (1)

shamaseen
shamaseen

Reputation: 2478

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.

Upvotes: 25

Related Questions