2

当我的网站在桌面大小的显示器上时,我希望加载其他不会在移动大小的显示器上加载的 jQuery 脚本。

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



背景调查:

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

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

例如,本教程给出了以下示例:

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

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

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

另一个问题是每次调整浏览器大小时都会加载脚本。对于某些脚本来说,这可能是一个问题(请参阅此处的示例,如果窗口多次调整大小,则单词 false/true 会无休止地重复)。

解决方案 3: 设置一个隐藏的 100% 宽度的 DIV,然后运行一个检查其宽度的脚本- 这样做的缺点是它仅在页面首次加载时运行,因此对于更改其窗口大小的用户不利(或设备的方向)。 您可以运行一个计时器,使其每 1 秒检查一次宽度,但这似乎效率不高。

有谁知道有效的解决方案?

谢谢。

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

4

1 回答 1

0

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

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

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

希望有帮助。

于 2012-10-07T18:59:03.383 回答