JavaScript 测试 CSS 样式表是否与 CSS3 媒体查询一起应用答案

【问题标题】：JavaScript test if a CSS stylesheet is applied with CSS3 media queryJavaScript 测试 CSS 样式表是否与 CSS3 媒体查询一起应用
【发布时间】：2012-01-02 07:34:21
【问题描述】：

我有两个样式表：

<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" />

仅当窗口为 800 像素或更宽时才应加载第二个（较窄的显示器获得更适合移动设备的布局）。

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

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

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

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

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

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您可以执行以下操作。

在第一个样式表中创建一个具有display: none; 的 div，因此它不会显示。
在第二个样式表中，您将添加一个position: absolute
在您的 Javascript 中检查 if( $("#thediv").css("position") == "absolute")

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

【讨论】：

已经尝试过了，但是由于然后
感谢 Niels， ($('html').css('text-align') == 'center') 与 html { text-align: center; }... 这可以在 DOM 加载之前应用 :-)。

【解决方案2】：

下面是一个示例，说明如何尝试检测浏览器窗口的“real”宽度：detect window width and compensate for scrollbars - Javascript

【讨论】：

谢谢 mmmshuddup，window.innerWidth 也可以工作......但我担心因为它是两个单独的测试（浏览器对 CSS3 min-width: 800px 的想法可能会改变），所以它不能确保两者将永远相同。

【解决方案3】：

您尝试的操作有问题。

如果用户在浏览页面时将窗口的宽度调整为低于 800 像素，那么他将获得该页面的移动版本，然后当他/她最大化时，他/她仍将获得移动版本。

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

最好的办法是读取浏览器的User Agent信息，很容易就能看出是手机浏览器还是其他浏览器，并据此加载css文件。然后对于可变屏幕分辨率，您可以使用当前技术来加载特定宽度的代码。

【讨论】：

嗨 Starx，实际上这是我希望的效果...我有一个设计，表单布局在表单输入字段上方有一个标签，这是一个很好的列布局，但非常当该表单在更宽的屏幕上变得很长时（标签可以在输入字段的左侧）很难使用......并且我正在进行一些其他更改（例如使用 JS 隐藏站点导航）。
还应注意，我正在 $(window).resize(update_page_layout); 上重新运行测试；