jQuery：如何检测窗口的宽度？

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

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

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

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 
    }); 
}

来源

2012-03-15 Dustin

移动'resize'，谨慎的只是建议回调里面你的代码，要限制执行的'resize'避免过度称之为 – 2012-03-15 13:06:40

135

更改变量if - 块内不会奇迹般地执行代码。将公共代码的功能，然后绑定事件，并调用函数：

$(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); 
});

来源

2012-03-15 13:06:07

谢谢！这几乎为我工作。但是，这是一个奇怪的问题..当我使浏览器窗口小于440像素，刷新页面，滚动功能不存在（好！）。当我调整窗口大于440时，滚动功能就在那里（也很好！）。但是，当我将窗口大小调整到小于440时，滚动功能不会消失（不好）。 – Dustin 2012-03-15 13:23:50

@DustinMcGrew这是由你的逻辑定义的：当窗口的宽度小于440时，没有任何事情发生（甚至没有重置）。你应该能够解决这个问题。如果不是，请分享有关此代码应用程序的更多详细信息。 – 2012-03-15 13:26:09

啊，你是对的！只需要添加一个else语句并调用jScrollPaneRemove（）函数。现在完美工作:) – Dustin 2012-03-15 13:31:17

把你好像里面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 
     }); 
    } 
});

来源

2012-03-15 13:05:48 antyrat

这样一个简单的，但并不明显修复此问题，谢谢。 – Lizardx 2017-02-16 23:21:25

我不知道这是否对你有用，当你调整你的页面：

$(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%"); 
     } 
    });

来源

2016-02-14 14:37:47

下面是我在屏幕尺寸低于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); 
});

来源

2017-04-13 14:28:28

jQuery：如何检测窗口的宽度？

回答

相关问题