如何使用jQuery檢測瀏覽器屏幕寬度增加超過某個點？

基本上，我想要做的就是觸發一個事件，如果用戶將瀏覽器的大小從X增加到Y.提供X =小於750像素，Y大於750像素。如何使用jQuery檢測瀏覽器屏幕寬度增加超過某個點？

現在，我做這樣的事情：

$(window).resize(function(){ 
    if ($(window).width() >= 750) { 
     console.log('750 or more'); 
    } 
});

這工作，然而，它顯然不是有效的。例如，如果我將窗口從780px調整到最大寬度（1024px），即使這樣事件也會被觸發。或者即使我將尺寸從800px減小到780px，我仍然很明顯得到了控制檯輸出。

我該如何解決這個問題？

來源

2016-06-09 Tahmid Khan Nafee

根據你想要當調整瀏覽器窗口中做的動作，你可能想看看使用CSS媒體查詢。 –

這裏沒有問題，因爲我想在大小改變時更改DOM元素的屬性。 –

在這種情況下，您的代碼是您擁有的唯一選項。我建議你看看debouncing event handler，因爲它會針對屏幕寬度被更新的每個像素觸發一次。 –

您將需要setTimeout以允許檢查發生。

例子：

var resizeTimer; 

$(window).resize(function() { 


clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(function() { 
    var body_size = $(window).width(); 

    // ... 
    // do your screen check here 
    // ... 


    }, 1); 

})

希望這有助於

來源

2016-06-09 16:32:54 KpTheConstructor

有後最大寬度已達到上調整大小功能的結果不再是這個問題沒有真正的解決方案，因爲在resize事件移除即使當寬度低於1024像素時也是如此。

也許在未來，只有在某些條件下才可能有調整大小的事件。

您還可以使用on resize end事件在調整窗口大小後僅觸發該函數，請記住這可能會導致在用戶調整窗口大小而不是調整窗口大小之後發生可視化更改。

有多種方法，使上resize事件有更好的表現：http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

來源

2016-06-09 16:41:13 seahorsepip

下面是使用腳本這可能是一個良好的開端節流版本

Fiddle demo

(function(timeout,bigger) {  // local static var - timeout,bigger 
 

 
     window.addEventListener("resize", function(e) { 
 
     if (!timeout) { 
 
      timeout = setTimeout(function() { 
 
      timeout = null; 
 
      actualResizeHandler(e); 
 

 
      // Set the actual fire rate 
 
      }, 66); 
 
     } 
 
     }, false); 
 

 
     function actualResizeHandler(e) { 
 
     // handle the resize event 
 
     
 
     if (window.innerWidth >= 750 && !bigger) { 
 
      //passed above (or equal) 750 
 
      document.querySelector('span').style.color = 'blue'; 
 
      document.body.innerHTML += '<br>above 750'; 
 
      
 
     } else if (window.innerWidth < 750 && bigger) { 
 
      //passed below 750 
 
      document.querySelector('span').style.color = 'red'; 
 
      document.body.innerHTML += '<br>below 750'; 
 
     } 
 
     bigger = (window.innerWidth >= 750); 
 

 
     } 
 
     
 
     // run once at load 
 
     bigger = (window.innerWidth < 750); 
 
     actualResizeHandler(); 
 
    
 
    }(null,false));

<span>This text is blue on big and red on small</span>

這裏是一個使用CSS媒體查詢

span { 
 
    color: red; 
 
} 
 

 

 
@media screen and (min-width: 750px) { 
 
    span { 
 
    color: blue 
 
    } 
 
}

<span>This text is blue on big and red on small</span>

來源

2016-06-09 16:45:36 LGSon

如何使用jQuery檢測瀏覽器屏幕寬度增加超過某個點？

回答

相關問題