jQuery：如何动态检测窗口宽度？答案

【问题标题】：jQuery: How to detect window width on the fly?jQuery：如何动态检测窗口宽度？
【发布时间】：2012-03-31 23:51:47
【问题描述】：

我的页面上有一个滚动元素（使用 jScrollPane jQuery 插件）。我想要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做一个响应式布局，我希望在浏览器低于某个宽度时关闭此滚动功能。当我刷新页面时，我可以让它工作，但是当我调整浏览器窗口的大小时，宽度值不会即时更新。

现在，如果我从一个 1000 像素宽的窗口开始，然后将大小调整为 350 像素，滚动功能仍然存在。我希望浏览器宽度达到 440 像素时立即关闭滚动功能。

这是我到目前为止的代码..

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}

【问题讨论】：

将你的代码移动到resize的回调中，只是提醒一下，你要限制resize的执行以避免过度调用它

标签： javascript jquery responsive-design

【解决方案1】：

以下是我在屏幕尺寸低于 768px 时隐藏一些 Id 元素并在高于 768px 时显示的操作。它工作得很好。

var screensize= $( window ).width();

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});

【讨论】：

【解决方案2】：

我不知道这对您调整页面大小时是否有用：

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });

【讨论】：

【解决方案3】：

更改变量不会神奇地执行if-block 中的代码。将常用代码放在一个函数中，然后绑定事件，调用函数：

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

【讨论】：

谢谢！这几乎对我有用。但这是一个奇怪的问题.. 当我让浏览器窗口小于 440 像素时，刷新页面，滚动功能不存在（好！）。当我将窗口大小调整为大于 440 时，滚动功能就在那里（也很好！）。但是当我将窗口大小调整回小于 440 时，滚动功能并没有消失（不好）。
@DustinMcGrew 这由你的逻辑定义：当窗口的宽度小于 440 时，什么也没有发生（甚至没有重置）。你应该能够解决这个问题。如果没有，请分享有关此代码应用的更多详细信息。
啊，你是对的！只需要添加一条 else 语句并调用 jScrollPaneRemove() 函数。现在完美运行:)
是否将引用存储在函数外部优化效率，因为 js 不必在每次调用函数时创建/查找新引用？
@Gnuey resize 事件在调整大小期间经常被称为 very。 jQuery 对象的构造非常昂贵，因此将引用存储在函数外部确实更理想。请注意，这仅适用于不变的对象/元素。 window 对象不再更改，#panel 标识的元素预计是唯一的（ID 是唯一的），因此可以安全地假设包装此元素的 jQuery 对象也将保持有效。

【解决方案4】：

将您的 if 条件放入 resize 函数中：

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});

【讨论】：

这个问题的解决方法如此简单，但并不明显，谢谢。