JQueryを小さな画面でのみ実行する

Question

jqueryを画面サイズがモバイルの場合にのみ実行しようとしています。今はもちろん、CSSでこれを行うのは簡単ですが、jqueryで画面サイズを検出しようとすると何らかの理由ですぐに動作しません。誰が私がここで間違っているのか知っていますか？

<script src="JAVASCRIPT/jquery-3.1.0.min.js"></script> 
<script> 
    if ($(window).width() > 600) {  
    } 
    else { 
    $(".tbinputArea").focus(function() { 
     $("#footer").hide(); 
    }); 

    $(".tbinputArea").focusout(function() { 
     $("#footer").show(); 
    }); 
    } 
</script> 

Answer 1

あなたはこのようにしてみてくださいことができます：

var isMobileView = false; //global variable 

$(document).ready(function() { 

    function setScreenWidthFlag() { 
     var newWindowWidth = $(window).width(); 
     if ($(window).width() > 600) { 
      isMobileView = false; 
     } 
     else { 
      isMobileView = true; 
     } 
    } 

    $(".tbinputArea").focus(function() { 
     if(isMobileView) 
      $("#footer").hide(); 
    }); 

    $(".tbinputArea").focusout(function() { 
     if(isMobileView) 
      $("#footer").show(); 
    }); 

    setScreenWidthFlag(); 

    $(window).on("resize", function (e) { 
     setScreenWidthFlag(); 
    }); 
}); 

Answer 2

このお試しください：これは完全に働いた

$(document).ready(function(){ 

    if ($(window).width() > 600) { 

       //Your code.... 
    } 


    $(".tbinputArea").on("focusin",function(){ 

     if($(window).width() <= 600) 

      $("#footer").hide();  

    }) 


    $(".tbinputArea").on("focusout",function(){ 

     if($(window).width() <= 600) 

      $("#footer").show();    
    }) 

})