Responsive Web Design, Pulling Up Keyboard on Mobile Device Messes Up Design

Question

I created a responsive design for my website. It's based on the contents of the website being inside a div which has a height of 100% of the window. The problem is that when a user clicks on an input field, the size of the browser shrinks to fit the area between the keyboard and the top url bar on a mobile phone browser. This makes my design look very odd while the keyboard is up.

Any idea how this can be fixed? I haven't seen this happen on other responsive sites, but haven't really observed closely either.

I have the following in the head of my html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Basically, I want the area which would otherwise be covered by the keyboard to be hidden when they keyboard is up, not pushed upward and squish my whole layout.

EDIT: I fixed it by doing this

$("#comment-text-area").focus(function() {
    var height = $("body").css('height');
    $("body").css('height', height);
});

Answer 1

Perhaps you could use javascript to detect when an input field is focused, then set the window's pixel size to whatever it was before the focus, then reset it back to auto when the field is unfocused?