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

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?

Answer 2

As far as I know mobile browsers not resize the window when the keyboard is show, they only move and cover the window.
Maybe you problem is the way you are achieving the 100% height, is there any vendor specific css or a JS handing the resize events?

Answer 3

You could try adding user-scalable=false; to the viewport meta tag, but more than likely resize-on-field-focus is an un-override-able feature of the browser itself. It's usually a good thing to have, even at the cost of design, because people generally enjoy larger text areas to see what they're typing so I'd personally recommend against using this.
<meta name="viewport" content="width=device-width, user-scalable=false;">