mobile virtual keyboard make html body height 100% wired

I’m making mobile page and all the layout is designed with percentage.
all the components in layout depends on body width, height.

When virtual keyboard is not present, there is no any problem.
But when virtual keyboard shows up, here is the problem.
I think a picture is worth a thousand words.

without virtual keyboardwith virtual keyboard

This shouldn’t happen!
Can anyone knows the way to ignore virtual keyboard area?
Or suggest alternative way?

This is the code for fitting height 100%.
The reason why I used this code instead of css or viewport device-height is
that css height:100% and viewport device-height is never working whatever I tried.

$( window ).resize(function() {
    var bodyWidth = $('html').width();
    var bodyHeight = $('html').height();  
    $('body').css("height", bodyHeight);
}


Source: javascript

Leave a Reply