按窗口大小更改重新加載瀏覽器

構建站點上的一些元素會考慮客戶端的大小。如果用戶決定重新調整窗口大小，一些元素會顯得混亂。所以，即時通訊試圖建立一個功能，不斷檢查是否有任何維度改變。按窗口大小更改重新加載瀏覽器

這是香港專業教育學院迄今

<script> 
    var initial_width = document.body.offsetWidth, 
     initial_height = document.body.offsetHeight, 
     timer = window.setInterval(function() {checksize()}, 10); 

     function checksize() { 
      var current_width = document.body.offsetWidth, 
       current_height = document.body.offsetHeight; 
       if((initial_width != current_width) || (initial_height != current_height)){ 
        location.reload(); 
       } 
       else{ 
        document.getElementById("test").innerHTML = "no change"; 
       } 
     } 
</script>

它的工作，有時，但如果窗口是重新大小超過某個點它只是不斷刷新做。

關於如何修復/改進此代碼的任何建議？或者我應該採取不同的方法？

乾杯。

來源

2014-09-04 Alex

你應該採取不同的方法。考慮使用反應式佈局（庫，框架等）。不相關，但'function（）{checksize（）}似乎是一種真正迂迴的說'checksize'的方式。 – 2014-09-04 17:31:58

你有試過嗎？ http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac – 2014-09-04 17:32:15

你能夠使用jQuery？如果是這樣，你可以使用'$（window）.on（'resize'，function（）{...}）'。 http://api.jquery.com/resize/ – Tricky12 2014-09-04 17:33:20

裹你想重新綁定了任何代碼：

//declare global variable 
var windowWidth = ""; 

$(window).resize(function() { 
    windowWidth = $(window).width(); 

    if (windowWidth < 768) { 
     //change element size 
    } else if (windowWidth >= 768 || windowWidth < 1000) { 
     //change element size again 
    } else { 
     //change element size again 
    } 
});

來源

2014-09-04 17:35:37

乾杯！你認爲我應該將重載功能替換爲重新調整元素的大小？我的意思是服務器明智，它會幫助帶寬？ – Alex 2014-09-04 17:44:58

問題不在於帶寬，而在於用戶體驗，所以是的，我會調整元素大小並不重新加載頁面。我會改變我的答案，展示一個如何工作的例子...... – 2014-09-04 17:47:28

答案已更新，包括如何標記不同的屏幕寬度以更改內容大小。顯然，將if語句中的寬度值更改爲您需要的值。如果你真的想要的話，你可以在窗戶高度上做同樣的事情。 – 2014-09-04 17:51:29

按窗口大小更改重新加載瀏覽器

回答

相關問題