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 docs中读到这一点，“将根据当前状态评估最大宽度或方向查询，这可能会在以后发生变化。” 这是指这种特殊行为还是代码有问题？

Answer 1

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

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