javascript - 您可以在 Android Chrome 上为 matchMedia 添加一个 javascript 回调监听器吗？

Question

我在页面上使用 matchMedia，我注意到在 Android 版 Chrome 上，匹配检查有效，但是当您尝试向媒体查询添加监听器时，回调函数永远不会触发。

我在桌面上运行了相同的代码并且它工作正常，但它似乎没有在使用 Chrome 作为浏览器的 Android 4.x 设备上调用监听器中的回调。这还没有在浏览器中实现吗？

var width768Check = window.matchMedia("(min-width: 768px)");
console.log(width768Check.matches);
console.log(width768Check.addListener);
width768Check.addListener(function(mediaQueryList) {
    console.log(mediaQueryList.matches);
});

更新

我一直在使用装有 Google Chrome v18.0.1025469 和 Android v4.2.1 的 Nexus 7 平板电脑以及装有相同版本的 Google Chrome 和不同版本的 Android v4.0.3 的 Asus Transformer 平板电脑进行测试。

有趣的是，Asus 平板电脑正确使用了监听器回调函数，而 Nexus 7 却没有。我不确定为什么在较新版本的 Android 操作系统上使用相同版本的 Chrome 会导致问题。另外，对于 Nexus 7，我下载了 Dolphin Browser，一切正常。

Answer 1

当您将视口(viewport)显示宽度设置为设备像素时，屏幕尺寸为 601x880 像素，根据设备像素密度(N7 为 1.3)缩小

这将解释您所看到的以及在此处的测试中可以看到的内容:http://jsbin.com/eyorap/latest

当您没有设置视口(viewport)宽度时，即使 screen.width 报告 601，媒体查询也会匹配，因为它应该使用实际的设备宽度。请参阅此演示:http://jsbin.com/igifon