JSFiddle - React, Tailwind, and code Playground

/* http://stackoverflow.com/questions/23023549/get-viewport-height-when-soft-keyboard-is-on/ */

by guest271314

HTML

<form>
    <input type="text" />
</form>
<input type="text" />
<div id="vwh"></div>

CSS

html {
    height : 100vh;
    width : 100vw;
}

JavaScript

$(function() {    
    if (/ipad|iphone/gi.test(window.navigator.userAgent)) {
    var events = "abort blur focus input scroll submit touchstart touchmove";
    $("form, input").on(events, function(e) {
return (function(window, elem, w, h) {
var vh = window.getComputedStyle(elem,null).getPropertyValue(h);
var vw = window.getComputedStyle(elem,null).getPropertyValue(w);
    var vwh = {"documentWidth": vw, "documentHeight": vh, "windowInnerWidth": window.innerWidth, "windowInnerHeight": window.innerHeight};
console.log(vwh);
var _vwh = document.getElementById("vwh");
    _vwh.innerHTML = JSON.stringify(vwh)
return vwh  
}(window, document.documentElement, "width", "height"));
    }).focus();
    };
})