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的Media Query等价物。它不是试图在Javascript中重新创建CSS媒体查询（即，它不是使用Jquery为css3-mediaqueries-js实现的不同窗口大小加载不同的CSS文件。）

Answer 1

虽然它不是专门针对jQuery的，但我在Paul Irish的Modernizr库中获得了很高的成功。一种简单的方法允许您使用与CSS中相同的语法来测试媒体查询。测试返回true或false。例如：

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

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

希望有所帮助。