确定浏览器的屏幕宽度是多少

Question

我在 Google 上搜索过这个问题，但仍然没有找到解决方案。所以基本上我想删除特定屏幕宽度上的类名。我有一个运行良好的代码，但它存在问题，我将举例说明问题所在。在我设置的代码中，当页面达到 850px 时，它将删除类名并且它工作正常但是当我刷新页面时，例如在 500px 上它不会删除类名，当我开始调整页面大小时它会删除类名。所以我想要的是当我在 500px 上刷新页面时，它会删除类名

有什么办法可以解决这个问题吗？

代码如下：

window.addEventListener('resize', function(event){
        if(window.matchMedia("(max-width: 850px)").matches){
            var poster = document.getElementById('poster');
            poster.classList.remove('fade')

            var bgtariler = document.getElementById('bg-trailer');
            bgtariler.classList.remove('fade')

            var mutebt = document.getElementById('muted-button');
            mutebt.classList.remove('fade') 
        }
        else if(video.ended){
            document.getElementById('bg-trailer').addEventListener('ended', function(){
                var poster = document.getElementById('poster');
                poster.classList.remove('fade')

                var bgtariler = document.getElementById('bg-trailer');
                bgtariler.classList.remove('fade')

                var mutebt = document.getElementById('muted-button');
                mutebt.classList.remove('fade')
            },false);
        }
        else{
            var poster = document.getElementById('poster');
            poster.classList.add('fade')

            var bgtariler = document.getElementById('bg-trailer');
            bgtariler.classList.add('fade')

            var mutebt = document.getElementById('muted-button');
            mutebt.classList.add('fade') 
        }
    })

Answer 1

尝试在load 事件中重用相同的函数，它会是这样的

function handleFadeClass() {
  /* Your function */
}

window.addEventListener('load', handleFadeClass);
window.addEventListener('resize', handleFadeClass);