JavaScript 测试 CSS 样式表是否应用了 CSS3 媒体查询

Question

我有两个样式表：

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

第二个应该仅在 window 为 800 像素或更宽时加载（较窄的显示布局更适合移动设备）。

JavaScript 需要知道是否正在应用第二个样式表，我已经尝试过 jQuery：

($(window).width() > 800)

但是当你达到 790 - 810px 宽度时，Chrome/Firefox（可能还有其他）将返回一个值，例如 791，并且 800px+ 样式表仍将被加载。

我怀疑这是由于滚动条（但针对 $(document) 或 $('html') 要么不起作用，要么是相同的）。

那么有没有办法测试 $('#css-desktop') 是否启用/活动/使用？

Answer 1

您可以执行以下操作。

1. 制作一个有display: none; 在第一个样式表中，因此未显示。
2. 在第二个样式表中，您将添加一个position: absolute
3. 在你的 Javascript 你检查if( $("#thediv").css("position") == "absolute")

position: absolute; 仅应用于第二个样式表。

Answer 2

你可以试试

window.matchMedia(document.getElementById('css-desktop').getAttribute('media')).matches;

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia

Answer 3

这是一个关于如何尝试检测浏览器“真实”宽度的示例 window： 检测 window 宽度并补偿滚动条 - Javascript

Answer 4

您尝试的操作有问题。

如果用户在浏览页面时将 window 的宽度调整到 800px 以下，他将获得页面的移动版本，稍后当他/她最大化时，他仍将获得移动版本。

因此，依靠屏幕宽度并不是一个可靠的方法，因为如今手机的屏幕分辨率正在显着增长。

最好的办法是读取浏览器的User Agent信息，这将很容易揭示它是移动浏览器还是其他浏览器，并根据它加载 css 文件。 然后对于可变屏幕分辨率，您可以使用当前技术来加载特定于宽度的代码。