Jqueryはサイズ変更時にクラスを追加します。ウィンドウの幅は正しくありません

Question

私は奇妙なことについて質問しました。私はjquery window.withとwindow.resizeを使用していますが、正確であるとは思わないので、最大幅1200pxで何かをするように設定しましたが、1280pxで行いますか？私のコードに何か問題がありますか？

jQuery(window).resize(function() { 
     if (jQuery(window).width() <= 1200) { 
      if(!jQuery(".navbar-collapse .nav li").hasClass("fa fa-chevron-down")) { 
       document.querySelector('style').textContent += "@media screen and (max-width: 1200px) { " + 
        ".fa, .fa-chevron-down:hover { color: black; }" + 
        ".fa-chevron-down:before {content: normal;}" + 
        ".nav .parent:before {display: inline-block;\n" + 
        "  content: '\\f078';\n" + 
        "  -webkit-border-after-width: 20px;\n" + 
        "  top: 7px;\n" + 
        "  position: absolute;\n" + 
        "  right: 24px;\n" + 
        "  font-size: 25px;\n" + 
        "  z-index: 8;}" + 
        "" + 
        "}"; 
      } 
      jQuery('.navbar-collapse .nav li').addClass("fa fa-chevron-down"); 
     } 
     else if(jQuery(window).width() >= 1201) { 
      jQuery('.navbar-collapse .nav li').removeClass("fa fa-chevron-down"); 
     } 
    }); 

誰もがそれだけで1200pxでクラスを追加し、1201pxとして、それを削除してこの問題を解決する方法を知っていますか？

Answer 1

私は問題は、window.width（）がスクロールバーなどを含むウィンドウの幅を返してくれると信じています（pls、私が間違っていれば正解...）。私はかつて同じような何かを必要としていると私は幅を決定するための関数を使用：これにより

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
    a = 'client'; 
    e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

次のようにあなたは、ウィンドウ幅を確認することができます。

if ((viewport().width <= 1200) 

Answer 2

jQueryの（ウィンドウ）.resizeを削除しますそれはメディを追加するために、むしろ奇妙な公正シンプル

if (jQuery(window).width() < 767) { 
$("p").append("<b>Appended text less than 767</b>"); 
} 
else if(jQuery(window).width() > 767) { 
$("p").append("<b>Appended text greater than than 767</b>"); 
}