title: Android web app keyboard doesn't resize view when web app open once
body: <p>I experience a weird behavior on web app added to home screen on Android devices when keyboard appears.</p>
  
  <p>I have a web app:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&gt;
  &lt;meta name="mobile-web-app-capable" content="yes"&gt;
  &lt;/head&gt;
  &lt;body style="overflow-y: scroll"&gt;
      &lt;div id="red" style="height:200px;width:100%;background-color:red"&gt;&lt;/div&gt;
      &lt;input type="text"&gt;
      &lt;script&gt;
          (function() {
              var baseH = window.innerHeight;
              window.addEventListener("resize", function() {
                  if (window.innerHeight&lt;baseH) {
                      document.getElementById('red').innerHTML = 'KEYBOARD';
                  } else {
                      document.getElementById('red').innerHTML = 'NO KEYBOARD';
                  }
              });
          })();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I open the web app, click on the input field, keyboard appears but resize event is not triggered.</p>
  
  <p>If I press recent application on my android device and I click on the current web app to go back in it and then click in input field keyboard appears and resize event is triggered.</p>
  
  <p>How can I make resize event triggered when I open the web app at the first time?</p>
  
  <p>Tested on Nexus4, Nexus5 and Nexus7 all on Android 4.4.x</p>