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：如何檢測窗口的寬度？

回答

相關問題