mobile keyboard resize viewport
I'm doing a responsive web site and I have this problem. Everything works well until I select an [input type="text"] and comes out the keyboard, entire site is resized, it's like the screen size is only the part above the keyboard. I just want that mantain the normal size. I've tried all the solution proposed on stackoverflow an other forum too, bun nothing seems to work.
Does anyone have any idea on how to fix this?
<head>
<title>SchoolIn</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
//other code
UPDATE: I'm going to try to explain better.
I have a head section
//other code
<div class="head">
//Here is some text
</div>
//other code
Then a content section
//other code
<div class="container">
<div class="content">
//other code
<input type="text" ...... />
<input type="password" ..... />
<input type="submit" ..... />
</div>
</div>
//other code
All the element are in percentage there is nothin in pixels.
When the keyboad comes out the header, the container and the content div are redimensioned, instead the input fields and the button don't. In any case they came out from their container, becouse the container goes smaller and they maintain the original size. I don't know if I made my self clear.
The question is the same, how I make it to remain to the original size when the keyboard comes out?
Answer
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Try this piece of html. I'm using it for every of my pages and it always did what it should. Maybe yours isn't working because of the missing minimum-scale attribute.