title: Get viewport height when soft keyboard is on
body: <p>I want to get the exact viewport size when the soft keyboard is up. I am currently using the following code on the header in order for the site to be responsive:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;/&gt;
  </code></pre>
  <p>What I realized is that when the soft keyboard comes up, it uses the device height as the viewport height and pushes the rest of the site upwards - which makes me assume that it's getting it's height from the width=device-width option.</p>
  <p>Using the following code after initiating the soft keyboard:</p>
  <pre><code>setTimeout(function() {  
      viewport = document.querySelector(&quot;meta[name=viewport]&quot;);
      viewport.setAttribute('content', 'height=auto');
  }, 300)
  </code></pre>
  <p>And then getting the height using jquery shows CORRECT results on Android - aka the visible viewport size WITHOUT the virtual keyboard, but not on iOS. I am getting a random number, which I assume stems from the rest of the meta tag not existing, so I am getting a zoomed-in version of the website along with a number like 75 or 100 (on iphone 4s)</p>
  <p>I also tried creating a fixed element after bringing the keyboard up, making it use the viewport height with top:0; and bottom:0; attributes, but I still get the original height.</p>
  <p>What comes closer to this, is setting the viewport meta tag height to a fixed value, that can be picked up by jquery's <code>$(window).height()</code>, which means that the meta tag actually makes a difference after initiating the keyboard, but there is no true value for a fixed height.</p>
  <p>I've seen lots of topics around this, but none with a solution. Anyone that has a solution for this?</p>