media-queries - 如何运行 jquery 函数但仅当浏览器窗口宽度> 1024px 时？

Question

这是我想添加到我的响应式单页网站的功能，但仅当浏览器宽度大于 1024 像素时。

我对 jQuery 的了解很少。这是我现在的代码：

$(document).ready(function() {
        var pageWidth = $(window).width();
        if (pageWidth > 1024) {

$('.footer a').mouseenter(function() {
$(this).effect("bounce", { times:1, distance:4 }, 250);
});

});
});

这是我在加载此函数的 HTML 中的代码：

<script type="text/javascript" src="js/tiny-bounce.js"></script>

另一个问题，当这个函数没有被触发时——例如，当用户在宽度小于 1024 像素的设备上加载网站时，他们还需要加载 javascript 文件吗？

Answer 1

你需要做的就是

而不是这个

if (pageWidth > 1024) {

做这个

if (pageWidth < 1024) {

Answer 2

是的，当宽度小于 1024 时，您仍然需要加载 JS 代码，除非您在 HTML 或现有 JS 脚本中包含此代码。

我相信您可以$(window).width()在没有的情况下调用$(document).ready()，因此这可能是减少在小屏幕上使用此额外代码的影响的一种方法。