javascript - Modernizr mq 的行为与 matchMedia 不同

Question

给出这段代码:

mql = window.matchMedia("(max-width: 800px)");
mql.addListener(mqlHandler);
function mqlHandler(mql) {
  if(mql.matches) {
    alert('OK');
};

以及其他代码:

if(Modernizr.mq("(max-width: 800px)")) {
  alert('OK');
};

matchMedia 版本按预期工作，当屏幕尺寸小于 800px 时，无论我调整页面大小多少次，它都会弹出警报，但是，第二个版本只会弹出当我重新加载屏幕宽度小于 800px 的页面时发出警报，如果之后调整屏幕大小，则不会显示警报。

我从 de Modernizr 文档中读到了这一点，“最大宽度或方向查询将根据当前状态进行评估，该状态稍后可能会发生变化。”这是指这种特定行为还是代码有问题？

Answer 1

Modernizr.mq 不会在调整大小时重新评估。它仅检查何时执行。等效的代码是

window.addEventListener('resize', function() {
    if(Modernizr.mq("(max-width: 800px)")) {
      alert('OK');
    };   
}, true);