title: mobile keyboard resize viewport
body: <p>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. </p>
  
  <p>Does anyone have any idea on how to fix this?</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;SchoolIn&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  //other code
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  I'm going to try to explain better.</p>
  
  <p>I have a head section</p>
  
  <pre><code>//other code
  &lt;div class="head"&gt;
    //Here is some text 
  &lt;/div&gt;
  //other code
  </code></pre>
  
  <p>Then a content section</p>
  
  <pre><code>//other code
  &lt;div class="container"&gt;
    &lt;div class="content"&gt;
      //other code
      &lt;input type="text" ...... /&gt;
      &lt;input type="password" ..... /&gt;
      &lt;input type="submit" ..... /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  //other code
  </code></pre>
  
  <p>All the element are in percentage there is nothin in pixels.</p>
  
  <p>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.</p>
  
  <p>The question is the same, how I make it to remain to the original size when the keyboard comes out?</p>