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（）返回窗口的宽度，包括滚动条等。（如果我错了，请纠正我...）。我曾经需要类似的东西，我用一个函数来确定宽度：

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（window）.resize（function（）

fiddle link工作简单

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

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

2 个答案: