Question

我正在设置多个媒体查询，例如：

for (var layoutId in layoutList) {
    console.log('Set up MediaQuery [%s]:', layoutId, getCssMediaQueryDefinition(layoutId));
    var mql = window.matchMedia(getCssMediaQueryDefinition(layoutId));
    mql.removeListener(onMatchMediaChange);
    mql.addListener(onMatchMediaChange);
}

var onMatchMediaChange = function (event) {
    console.log('onMatchMediaChange [%s]:', _.get(getLayoutForCssMediaQuery(event.media), 'id'), window.innerWidth, event.media);
};

当我启动应用程序时，控制台看起来像：

Set up MediaQuery [phone]: (max-width: 512px)
Set up MediaQuery [tablet]: (max-width: 1002px) and (min-width: 512px)

......看起来不错。

但是，当我调整窗口大小时，会发生这种情况（控制台语句）：

onMatchMediaChange [tablet]: 859 (max-width: 1002px) and (min-width: 512px)
onMatchMediaChange [phone]: 436 (max-width: 512px)
onMatchMediaChange [tablet]: 436 (max-width: 1002px) and (min-width: 512px)

前两个日志是正确的，但第三个日志不正确：由于某种原因，“平板电脑”的媒体查询在“电话”之后立即错误地触发。

任何指针都可能出错？

window.matchMedia触发太频繁（误报）

0 个答案: