Mobile vertual keyboard detection

by Cheng-Chung Chiu

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div id="main">
    <div id="content">         
         <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>
        <br><br>
            ----------        
        <p id="msg"></p>
            ------------<br><br>
        <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();
                $("#msg").html("upup");
            }else{
                removeClass();
                $("#msg").html("DOWN");

            };    
        },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');    
        }
    
})