Question

我正在尝试将一组简单的媒体查询从css调整为javascript。 css定义按预期工作，但是javascript代码没有。

代码块如下所示：

  window.matchMedia("(min-width: 401px) and (max-width: 600px)")
  .addListener( function() {
    console.log("CALLBACK (max-width: 600px)");
    document.body.style.background = "red";
  });

根据宽度，我更改文档颜色。当我改变窗口的大小时，似乎调用了两个回调函数：一个匹配前一个宽度，一个匹配当前宽度。

我希望只调用与当前宽度匹配的那个。

例如，当我将浏览器大小从window.innerWidth 1871更改为window.innerWidth 700时，会发生以下情况：

window.innerWidth: 1871
CALLBACK (max-width: 800px)
CALLBACK (min-width: 801px)
window.innerWidth: 700

并应用了min-width 801px的回调。

我做错了什么？

完整的测试代码在这里：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>

window.onresize = afterWindowResize;
function afterWindowResize(){
  showSize();
}

function x(){
  showSize();

  window.matchMedia("(max-width: 400px)")
  .addListener( function() {
    console.log("CALLBACK (max-width: 400px)");
    document.body.style.background = "green";
  });

  window.matchMedia("(min-width: 401px) and (max-width: 600px)")
  .addListener( function() {
    console.log("CALLBACK (max-width: 600px)");
    document.body.style.background = "red";
  });

  window.matchMedia("(min-width: 601px) and (max-width: 800px)")
  .addListener( function() {
    console.log("CALLBACK (max-width: 800px)");
    document.body.style.background = "blue";
  });

  window.matchMedia("(min-width: 801px)")
  .addListener( function() {
    console.log("CALLBACK (min-width: 801px)");
    document.body.style.background = "gray";
  });
}

function showSize(){
  console.log("window.innerWidth: " + window.innerWidth); 
}

</script>
</head>
<body onload="x()">
</body>
</html>

Answer 1

如果你传递了该事件，然后使用matches它将正常工作

window.matchMedia("...").addListener( function(e) {
    if (e.matches) {
       // do something
    }
}

或者您也可以使用this，例如if (this.matches) {...}

Stack snippet

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
      window.onresize = afterWindowResize;

      function afterWindowResize() {
        showSize();
      }

      function x() {
        showSize();

        window.matchMedia("(max-width: 400px)")
          .addListener(function(e) {
            if (e.matches) {
              console.log("CALLBACK (max-width: 400px)");
              document.body.style.background = "green";
            }
          });

        window.matchMedia("(min-width: 401px) and (max-width: 600px)")
          .addListener(function(e) {
            if (e.matches) {
              console.log("CALLBACK (max-width: 600px)");
              document.body.style.background = "red";
            }
          });

        window.matchMedia("(min-width: 601px) and (max-width: 800px)")
          .addListener(function(e) {
            if (e.matches) {
              console.log("CALLBACK (max-width: 800px)");
              document.body.style.background = "blue";
            }
          });

        window.matchMedia("(min-width: 801px)")
          .addListener(function(e) {
            if (e.matches) {
              console.log("CALLBACK (min-width: 801px)");
              document.body.style.background = "gray";
            }
          });
      }

      function showSize() {
        console.log("window.innerWidth: " + window.innerWidth);
      }

    </script>
  </head>

  <body onload="x()">
  </body>

</html>

为什么不应用时调用window.matchMedia回调？

1 个答案: