Javascript 尺寸屏幕小于 60% 可见时隐藏 div（显示移动键盘时）

Question

I'm trying to hide a div when user fills a form on a mobile device, so the screen could be more visible due to keyboard displaying.

HTML

<div id="fixed-bottom-menu">BLA BLA BLA</div>

The JS code must display again the div when mobile keyboard is hidden.

My attempt:

<script type="text/javascript">
    if( $(window).width() < 60%)
    {
        document.write( '<style>"#fixed-bottom-menu"{visibility:hidden}</style>' );
    }
</script>

Answer 1

you need a eventlistner to do this and the % should not be there and you need to check the current viewport height is 40% less than the total screen size inorder to make it work

if you are using document.write() it will remove jquery from the script it is not advisable to using document.write()

check this https://jsfiddle.net/anirudhsanthosh/hrsd8o5p

use jquery.css() method to change css property of an element

<script type="text/javascript">
        $(window).resize(()=>{

         if(( window.innerHeight/screen.availHeight)*100 < 60)
         {
         
            $('#fixed-bottom-menu').css({display:"none"})
            return
         }
         $('#fixed-bottom-menu').css({display:"block"})
    })
    
    </script>