jQuery在调整大小时添加类，窗口宽度不正确

Question

I had a question about something weird. I have been using jquery window.with and window.resize but I don't feel like it is accurate, I have set it to do something at max-width 1200px, but it does it at 1280px? Is there something wrong with my code?

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");
        }
    });

Does anyone know how to fix this problem so it just adds the class at 1200px and removes it as 1201px?

Answer 1

I believe the problem is, that the window.width() returns the width of the window including scrollbars etc. (pls, correct me if I'm wrong...). I have once needed something similar and I used a function to determine the width:

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' ] };
}

With this you can check for the window-width as follows:

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

Answer 2

remove jQuery(window).resize(function()

fiddle link that works fair simple

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>");
}