檢測窗口調整大小，並執行jQuery的功能

Question

我該如何做到這一點，以便每當用戶更改窗口大小，頁面執行功能？

Answer 1

下面的函數應該做你需要什麼，它適用於所有的瀏覽器（與不點火的一個例外，當Safari瀏覽器沒有被最大化和分辨率的變化）

它觸發時窗口大小調整爲以及分辨率更改，並且還有一個延遲，以避免在用戶重新調整窗口大小時進行多次呼叫。

var resizeTimer; 

    //Event to handle resizing 
    $(window).resize(function() 
    { 
     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(Resized, 100); 
    }); 

    //Actual Resizing Event 
    function Resized() 
    { 
     //Your function goes here 
    }; 

Testing jsFiddle

Answer 2

您可以將事件在onResize窗口上註冊：當窗口大小改變

https://developer.mozilla.org/en/DOM/window.onresize

Answer 3

使用screen.width和screen.height確定寬度的函數被調用，屏幕的高度。

Answer 4

在關於這篇文章：https://developer.mozilla.org/en-US/docs/DOM/window.onresize

window.onresize = resize; 

function resize() 
{ 
    alert('window size changed'); 
} 

window.resize使得它相當簡單。

Answer 5

我的提議。第一個HTML & CSS。

HTML

<div id="wrapper"> 
    <div id="div1"> 
     #div1 content 
    </div> 
    <div id="div2"> 
     #div2 content 
    </div> 
</div> 

CSS

div { 
    color: white; 
    margin: 20px; 
    padding: 5px 18px; 
    font: 700 16px/200% sans-serif; 
} 
#div1 { 
    background-color: #d00; 
} 
#div2 { 
    background-color: #27d; 
} 

現在jQuery的：

在文件俱備只（https://jsfiddle.net/sz7aeo9j/）

<script> 
    $(document).ready(function() { 
     var divone = $('#div1')[0].outerHTML 
     var divtwo = $('#div2')[0].outerHTML 
     $('#div2,#div1').remove(); 
     if ($(window).width() < 640) { 
      $('#div1').remove(); 
      $('#wrapper').html(divtwo); 
     } 
     if ($(window).width() > 640) { 
      $('#div2').remove(); 
      $('#wrapper').html(divone); 
     } 
    }); 
</script> 

在調整窗口大小（https://jsfiddle.net/sz7aeo9j/1/）

<script> 
    $(document).ready(function() { 
     var divone = $('#div1')[0].outerHTML 
     var divtwo = $('#div2')[0].outerHTML 
     $('#div1').remove(); 
     $(window).resize(function() { 
      if ($(window).width() < 640) { 
       $('#div1').remove(); 
       $('#wrapper').html(divtwo); 
      } 
      if ($(window).width() > 640) { 
       $('#div2').remove(); 
       $('#wrapper').html(divone); 
      } 
     }); 
    }); 
</script>