2

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

我在桌面上运行了相同的代码，它工作正常，但它似乎没有在使用 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 平板电脑进行测试。

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

4

3 回答 3

0

我也遇到了这个问题，并发现 - 至少在网络上 - 一个有趣的解决方法建议：

WebKit 的媒体查询监听器

我已经在带有 Chrome 的 iPhone 4S 上测试了这个解决方案，并且（很重要！）在带有 Chrome 的三星 Galaxy Nexus（左右）上也测试了它，并且它有效。

这有点难看，但我发现它比等待正常工作的方向更改事件（在文档或屏幕上）更好。

于 2013-11-01T14:10:14.753 回答
0

当您将视口显示宽度设置为设备像素时，屏幕尺寸为 601x880 像素，根据设备像素密度（N7 上为 1.3）按比例缩小

这将解释您所看到的，并且可以在此处的测试中看到：http: //jsbin.com/eyorap/latest

当您不设置视口宽度时，即使 screen.width 报告 601，媒体查询也会匹配，因为它应该使用实际的设备宽度。看这个演示：http: //jsbin.com/igifon

于 2013-03-01T00:01:54.363 回答
0

你可以试试轻量级的Inquire .js库。它处理匹配和不匹配+初始可选函数的回调。它似乎在带有 Chrome 浏览器的 Android 设备上运行良好，但我目前在本机浏览器上触发方向匹配有困难。

另外：Paul Irish 有自己的 matchMedia实现。

于 2015-03-18T17:14:38.767 回答