Javascript CSS媒体屏幕宽度vs jQuery（窗口）.width（）

在jquery的帮助下，我制作了一些漂亮的

CSS3

动画，在制作这些动画函数的过程中，我偶然发现了一件奇怪的事情，的确非常奇怪

我正在呼叫的媒体查询状态

@media screen and (max-width: 1024px)

但当我使用JavaScript调用窗口宽度时，它显示它实际上在窗口宽度1009px处触发

console.log('window.size: '+$(document).width());

---

我必须承认我完全被这件事弄糊涂了，有人有什么好主意吗？：）

在@Pete为我指出了正确的方向，并在某处找到了一小段代码后，我想到了这个：

（如果我能记得我在哪里找到它，我会把它归功于提出以下建议的人，但如果其他人需要类似的解决方案，我会把它张贴在这里）

---

我也遇到过同样的问题，我相信这与jQuery有关，我发现的解决方案可能比整个函数要轻一点

window.innerWidth 

而不是使用jQuery来选择主体/窗口宽度

在没有jQuery选择器的情况下，这里有一把小提琴在工作

使用

$(window).resize(function() {
    console.log(window.innerWidth);
});

$(window).resize(function() {
    console.log($(window).width());
});

这里是它的中断，使用jQuery选择器

使用

$(window).resize(function() {
    console.log(window.innerWidth);
});

$(window).resize(function() {
    console.log($(window).width());
});

您将在控制台中看到，当媒体查询弹出时，屏幕将下降到600px，仅使用javascript时，控制台将同意宽度，而使用jQuery时，屏幕将缩小约17px

---

希望这能有所帮助。

我遇到了一个非常好的解决方案，可以验证哪个媒体文件处于活动状态。添加一个选择器，用于更改css媒体文件中的状态或字体，并检入js以检查状态是否已更改

.width-verify{
    display: none;
}

@media only screen and (min-width: 768px) {
    .width-verify {
        display: block;
    }
}

JS:

---

由于

您的浏览器窗口是否在右侧有滚动条？这可以在媒体查询中考虑，但jsahhh滚动条除外！！我想你的答案是：）@Renéhaugereinhold你可能不想用

$（window.width（）

我实际上有。。donno我为什么写这个文件。。。我猜是脑放屁。@Rene HaugeReinholdt-啊，好的。如果你做一个测试，它们都给出相同的值？