Jquery 的媒体查询等价物是什么

Question

当我的网站在桌面尺寸的显示器上时，我希望加载额外的 jQuery 脚本，而这些脚本不会在移动尺寸的显示器上加载。

CSS 具有媒体查询功能，可以根据浏览器大小轻松加载 CSS 文件。 Jquery 是否有类似的功能？

---

---

背景研究：

以下是我找到的一些解决方案以及每个解决方案的缺点。

解决方案 1： Enquire.js - 这应该是 Javascript 的媒体查询等价物（我认为）。但是，文档不是很清楚（至少对于初学者来说）。

例如，this tutorial 给出以下示例：

enquire.register("max-width: 960px", function() {
  // put your code here
});

但是，如果您将 Jquery 代码复制并粘贴到它所说的位置，则不会发生任何事情！我认为您可能必须放置一个指向您的 Jquery 文件的链接，但文档没有说明如何做到这一点！

解决方案 2： Use Window Resize - 您可以使用 $(window).resize 触发脚本。但是，它只有在用户重新调整浏览器大小时才会起作用。这对于窗口总是最大化的桌面用户来说是没有好处的。

另一个问题是每次调整浏览器大小时都会加载脚本。对于某些脚本来说，这可能是个问题（参见示例 here，如果窗口多次调整大小，单词 false/true 会不断重复）。

解决方案 3： Set a hidden 100% width DIV and then run a script that checks it's width - 这样做的缺点是它只在页面首次加载时运行，因此对于更改大小的用户来说并不好他们的窗口（或设备的方向）。 You can run a timer so it checks 每 1 秒的宽度，但这似乎效率不高。

有人知道可行的解决方案吗？

谢谢。

PS。这个问题是关于 Jquery 的等效媒体查询。这不是关于尝试在 Javascript 中重新创建 CSS 媒体查询（即，它不是关于使用 Jquery 为不同的窗口大小加载不同的 CSS 文件，这是通过 css3-mediaqueries-js 实现的）。

Answer 1

虽然它不是专门为 jQuery 设计的，但我在 Paul Irish 的 Modernizr 库方面取得了很大的成功。一个简单的方法允许您使用与 CSS 相同的语法来测试媒体查询。测试返回真或假。例如：

if (Modernizr.mq('only screen and (max-width: 768px)') == true) {
  // your code here
} 

如果浏览器接受来自该规则的 CSS，那么该函数也将返回 true。你可以在Modernizr docs阅读更多内容。

希望对您有所帮助。