JSFiddle - React, Tailwind, and code Playground

HTML

<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>

 <p>However a custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.</p>

 <p>Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside, "fluid". </p>
        <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>

 <p>However a custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.</p>

 <p>Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside, "fluid". </p>
        <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>

 <p>However a custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.</p>

 <p>Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside, "fluid". </p>
        <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>

 <p>However a custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.</p>

 <p>Targets both androids and ios, on a...

CSS

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}
#main{
    width:100%;
    height:100%;
    background:#ccc;
}
#keyboard{
    width:100%;
    background:#999;
    position:absolute;
    bottom:0;
    height:20px;
}
#keyboard.kb{
    height:50%;
}

#content{
    font-size:1em;
    background:#f1f1f1;
    width:100%;
    height:100%;
    overflow:hidden;
}
#content img{
    width:60%;
}

#content.kbactive{
    font-size:.5em;
    height:50%;
}

#content.kbactive img{
    width:30%!important;
}

JavaScript

$(function(){
    $('#keyboard').on('click', function(){
        $(this).toggleClass('kb');
       $('#content').toggleClass('kbactive');   
    })
})