当我的网站在桌面大小的显示器上时,我希望加载其他不会在移动大小的显示器上加载的 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实现的)。