Javascript jQuery window.resize在刷新后不起作用

嗨，我对这个脚本有一个问题，特别是。我希望id=visibility的元素在浏览器窗口>767px时具有display:none属性，并且页面上出现了id=hidden且具有display:block属性的元素

当开发者工具中的reduce browser窗口可用时，但当我刷新页面时，脚本不起作用

有人知道为什么吗

---

感谢您的帮助

这并不能回答问题，但它会更轻松地解决您的问题。在CSS文件中使用如下媒体查询：

    $(window).on('resize', function () {
    if ($(window).width() >= 767) {
        $('#hidden').css('display', 'none');
        $('#visibility').css('display', 'block');
        $('#none').css('display', 'none');
        $('#block').css('display', 'block');
    } else {
        $('#hidden').css('display', 'block');
        $('#visibility').css('display', 'none');
        $('#none').css('display', 'block');
        $('#block').css('display', 'none');
    }
});

---

Media query将切换您的css样式，以防您的屏幕宽度小于767px

这件事也发生在我身上我刚刚尝试过这个

#hidden { display: none; }
#visibility { display: block; }
#none { display: none; }
#block { display: block; }

@media only screen and (max-width: 767px) {
  #hidden { display: block; }
  #visibility { display: none; }
  #none { display: block; }
  #block { display: none; }
}

---

通过使用CSS媒体查询以给定的分辨率隐藏/显示元素，可以完全避免该问题。它的性能比JS好得多，因为只有在调整窗口大小时才会触发调整大小。刷新不是调整大小。你必须在document上调用你的函数。也准备好了，甚至更好：使用CSS媒体查询。CSS@media查询这个解决方案是最好的

#hidden { display: none; }
#visibility { display: block; }
#none { display: none; }
#block { display: block; }

@media only screen and (max-width: 767px) {
  #hidden { display: block; }
  #visibility { display: none; }
  #none { display: block; }
  #block { display: none; }
}

      $(window).on('load resize ', function () {

       //your code 
       })