Menu
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 :)
401
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.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With