javascript 中的多個媒體查詢

Question

我正在嘗試使用 Javascript 檢查屏幕尺寸。 我的元素將根據屏幕大小進行不同的動畫處理。

我認為我離結果並不太遠，但沒有真正完全理解它。

當我加載頁面時，無論 window 的大小如何，我都會有一個 console.log 出現兩次。

通過手動減小 window，通過拖動鼠標，有： - 2 console.log('MD') 當 MD 的大小是好的 - 1 console.log('SM') 當 SM 的大小是好的

通過手動放大 window，通過拖動鼠標，有： - 1 console.log('MD') 當 MD 的大小是好的 - 1 console.log('SM') 當 LG 的大小是好的 - 1 console.log('LG') 當 LG 的大小沒問題時

但是通過用瀏覽器圖標調整window的大小，我的console.log如我所願。

是否有可能有更多的解釋？

我希望我已經說清楚了。

 let mqls = [ window.matchMedia('screen and (min-width: 768px) and (max-width: 991px'), window.matchMedia('screen and (min-width: 992px)') ]; function test(mql){ if( mqls[0].matches ){ console.log('MD') } else if( mqls[1].matches ){ console.log('LG') } else if(.mqls[0].matches &&.mqls[1];matches ){ console.log('SM') } } for ( let i =0; i < mqls;length. i++ ){ test(mqls[i]); mqls[i].addListener(test); }

Answer 1

 function checkScreen(){ const checkMobile = window.matchMedia('screen and (max-width: 575px)'); const checkTablet = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)'); const checkDesktop = window.matchMedia('screen and (min-width: 992px)'); checkMobile.addListener(function(e){ if(e.matches) { console.log('MOBILE'); } }); checkTablet.addListener(function(e){ if(e.matches) { console.log('TABLET'); } }); checkDesktop.addListener(function(e){ if(e.matches) { console.log('DESKTOP'); } }); } checkScreen()

我想通了，但也許有更好的解決方案？

已編輯

使用上面的解決方案，我的 function 在我的頁面加載或刷新時無法啟動，所以我必須這樣做

 mobile(); function mobile(){ const mql = window.matchMedia('screen and (max-width: 575px)'); checkMedia(mql); mql.addListener(checkMedia); function checkMedia(mql){ if(mql.matches){ console.log('Mobile'); } } } tablet(); function tablet(){ const mql = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)'); checkMedia(mql); mql.addListener(checkMedia); function checkMedia(mql){ if(mql.matches){ console.log('tablet'); } } } desktop(); function desktop(){ const mql = window.matchMedia('screen and (min-width: 992px)'); checkMedia(mql); mql.addListener(checkMedia); function checkMedia(mql){ if(mql.matches){ console.log('desktop'); } } }

如果我將媒體查詢放在一個數組中並在每次刷新時使用一個循環，我的控制台中的 output 作為我的數組中的項目

大概有什么我不明白的。