TEST Mobile vertual keyboard detection

by Bianca Kuehweidner

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>
        
      <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 
        console.log(initialScreenSize);
        
        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;
            console.log(kbactive);
            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');    
        }
    
})