Mobile vertual keyboard detection

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div id="main">
    <div id="content">
        <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRyOiGGjBfqYT0y5hOaGwwpFsRq-KqBx84g2PfUrwR0aKr_Se1Hxw" alt="" />
         
         <p>Ideally, i would want the entire interface to resize (squeeze) into the small little box that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details. </p>
        
        <label for="fname">First name</label>
    <input type="text" id="fname" /> 
    <label for="lname">Last name</label>
    <input type="text" id="lname" />
    <label for="email">Email</label>
    <input type="email" id="email" /> 
    <label for="phone">Phone</label>
    <input type="tel" id="phone" />
    <button type="submit">Submit</button>

 
    </div>  
    
</div>

CSS

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}
#main{
    width:100%;
    height:100%;
    background:#ccc;
}
#content{
    font-size:1em;
    background:#f1f1f1;
    width:100%;
    height:100%;
    overflow:hidden;
}
label{
    display:block;
}
input[type="text"], input[type="tel"], input[type="email"]{
    width:60%;
}

#content img{
    width:60%;
}

#content.kbactive{
    font-size:.8em;
}

#content.kbactive img{
    width:30%!important;
}
#content.kbactive input[type="text"],#content.kbactive input[type="tel"], #content.kbactive input[type="email"]{
    width:30%;
}

JavaScript

$(function(){
        
        var i=0,
        initialScreenSize = screen.height, //Checks initial height of the screen 
        intId =  window.setInterval(function(){ //Setting interval to check screensize changes / not
            if(check()){
                addClass();
            }else{
                removeClass();
            };    
        },800);
        
        function check(){ //Actual screen height change checking code
            var kbactive = screen.height;
            if(initialScreenSize !== kbactive ){
                addClass();
                return true;
            }else{
                removeClass();
                return false;    
            }
        }
        
        function addClass(){ //Adds keyboard active class
            $('#content').addClass('kbactive');    
        }
        
        function removeClass(){ //Removes keyboard active class
            $('#content').removeClass('kbactive');    
        }
    
})