檢測屏幕的寬度用javascript

Question

if(screen.availWidth > 850){ 
    //Do this 
} else { 
    //Do this 
} 

這就是我現在所擁有的。我現在的問題是，如果有人要放大頁面，我希望寬度改變，因爲它會影響頁面的顯示方式。

Answer 1

你不是應該更擔心有人調整他們的瀏覽器窗口？不是每個人都讓他們的瀏覽器最大化。

要做到這一點：

if((window.innerWidth || document.documentElement.clientWidth) > 850) { 
    // do something 
} 
else { 
    // do other thing 
} 

我相當肯定這需要變焦考慮，但我從來沒有測試過。

Answer 2

綁定的事件處理程序window.onresize event：

window.onresize = function(event) { 
    if (screen.availWidth > 850) { ... } 
}; 

如果你使用jQuery：

$(window).resize(function(){ 
    if ($(window).width() > 850) { ... } 
}); 

此外，如果你想創建一個響應式設計，可以考慮使用CSS media queries。如果用戶放大或調整瀏覽器窗口大小，則會自動調整頁面，並且在用戶停用JavaScript的情況下也可以使用該頁面。

/* CSS */ 
@media (min-width: 850px) { 
    /* style */ 
}