僅為最小寬度加載 javascript

Question

我只想在最小寬度 > 1000 px 時加載特定的 javascript。 因此我想使用這里提到的這段代碼：

window.addEventListener('resize', function(){
    if(window.innerWidth > 568){
        ...execute script
    }
});

不知何故，這不起作用。 這是我的完整代碼塊：

         var t = (0, s.qs)(".js-twitter-feed");
         window.addEventListener('resize', function(){
             if(window.innerWidth > 1000){
         if ("undefined" != typeof twitterFeed && t) {
             t.classList.remove("u-hide");
             var r = document.createElement("div");
             r.innerHTML = '<a class="twitter-timeline" data-height="500" href="https://twitter.com/'.concat(twitterFeed, '">Tweets by ').concat(twitterFeed, "</a>"), t.appendChild(r), (0, o.loadScript)("https://platform.twitter.com/widgets.js")
         }
             }
         });

我做錯了什么？

Answer 1

一種更高效的方法是使用window.matchMedia方法來獲取 MediaQueryList 並將 eventListener 附加到它。

這是一個如何執行此操作的示例（當頁面加載時滿足條件或將屏幕大小從 300 像素以下調整為 300 像素或以上時，將執行回調）：

 window.addEventListener('DOMContentLoaded', () => { const callBack = () => console.log('do stuff'); const mediaQuery = window.matchMedia('(min-width: 300px)'); if (mediaQuery.matches) callBack(); mediaQuery.addEventListener('change', (event) => { if (event.matches) callBack(); }); });