如何运行 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>

另一个问题，当这个函数没有触发时——例如，当用户在宽度

Answer 1

你需要做的就是

而不是这个

if (pageWidth > 1024) {

这样做

if (pageWidth < 1024) {

Answer 2

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

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