Javascript 尺寸屏幕小於 60% 可見時隱藏 div（顯示移動鍵盤時）

Question

當用戶在移動設備上填寫表單時，我試圖隱藏一個 div，因此由於鍵盤顯示，屏幕可能更加明顯。

HTML

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

隱藏移動鍵盤時，JS代碼必須再次顯示div。

我的嘗試：

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

Answer 1

您需要一個 eventlistner 來執行此操作，並且 % 不應該在那里，您需要檢查當前視口高度是否比總屏幕尺寸小 40% 才能使其正常工作

如果您使用的是 document.write() 它將從腳本中刪除 jquery 不建議使用 document.write()

檢查這個https://jsfiddle.net/anirudhsanthosh/hrsd8o5p

使用 jquery.css() 方法更改元素的 css 屬性

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