javascript - 媒体查询和 Javascript

Question

我想在屏幕分辨率降低时更改脚本。我读了一些关于使用“screen.width”的东西不起作用。

这是我的脚本代码...

    $(function() {    
         $("div.holder").jPages({
             containerID: "itemContainer",
             keyBrowse   : true,
             perPage : 5     
         }); 
    });

例如，我希望屏幕分辨率小于 600 像素时只显示两个帖子。

谢谢！

Answer 1

您可以使用 resize 事件处理程序，例如提到的 braican。但是，我建议将其与Throttle绑定。

另一种选择是使用mediaCheck（它只是 matchMedia 的一个包装器）。

Answer 2

您可以使用 window.innerWidth 来获取窗口的大小。您的示例已修改以支持这一点：

$(function() {    
     $("div.holder").jPages({
         containerID: "itemContainer",
         keyBrowse   : true,
         perPage : (window.innerWidth < 600 ? 2 : 5)     
     }); 
});

Answer 3

您可以将处理程序附加到resize事件。由于您似乎正在使用 jQuery：

$(function() {    
    $("div.holder").jPages({
        containerID: "itemContainer",
        keyBrowse   : true,
        perPage : 5     
    }); 

    $(window).resize(function() {
        if(window.innerWidth < 600){
            // change perPage to 2 here
        }
    });
});

jQuery 的 .resize() 方法的文档 - http://api.jquery.com/resize/