Question

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

这是我的脚本代码......

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

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

谢谢！

Answer 1

您可以使用window.innerWidth来获取窗口的大小。您的示例已修改为支持此功能：

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

Answer 2

您可以将处理程序附加到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/

Answer 3

您可以使用调整大小事件处理程序，如braican提到的。但是，我建议用Throttle绑定它。

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

媒体查询和Javascript

3 个答案: