Question

如果宽度大于1200像素，我正在尝试执行javascript函数。

我需要执行的代码有效，但检查屏幕大小不会：

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
            <<<some other code that's working>>>
    }
}, true);

所有这些代码都在document.ready函数之外的javascript文件中。

编辑：当您拖动屏幕窗口时，它不像普通的CSS查询那样工作。这就是问题。如果您刷新页面，它可以工作，但如果您更改浏览器的宽度，然后它不会调整，则需要立即重新加载。

这是我的问题。

Answer 1

您需要添加else子句才能获得所需的行为。否则，resize事件只能按照你所描述的方式进行。

window.addEventListener("resize", function(){
    // fire when above 1203
    if (document.documentElement.clientWidth > 1203) {
      console.log('Greater!');
    }
    // fire when below 1203
    else {
      console.log('Smaller!');
    }
}, true);

以下是planet260撰写的固定jsfiddle的链接：http://jsfiddle.net/4dnemh2j/4/

这是我的例子：https://jsfiddle.net/9n5hmpua

Answer 2

问题是您传递给addEventListener的true。

请参阅此处的useCapture部分：EventTarget.addEventListener

通过树向上鼓泡的事件不会触发指定使用捕获的侦听器

所以你想要：

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
        <<<some other code that's working>>>
    }
}, false);  <----change here

Answer 3

您可以使用jQuery实现此目的

$( window ).resize(function() {
  console.log($( window ).width());
  var windowwidth = $( window ).width();
  if (windowwidth > 500) {
      console.log("Greater than 500");
     /*Do your work here*/ 
  }
});

仅当宽度高于x像素时才执行javascript代码

3 个答案: