Javascript jQuery和CSS媒体查询不匹配

我在元素中插入了CSS代码，以便仅在移动设备上显示：

@media only screen and (max-width: 780px) { #footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}}

到目前为止效果很好。然后我添加了这个jQuery，以便在滚动中显示它

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop()>100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
});

但现在，该元素也显示在PC上。我需要在JS代码中插入什么才能告诉他不在PC上显示它？

---

谢谢。

默认情况下，对页脚应用

显示：无。然后，将检查滚动位置的代码包装在检查窗口宽度的
if
语句中


jQuery（窗口）。滚动（函数（）{
if（jQuery（window）.width（）100）
{
jQuery（'#footer'）.fadeIn（）；
}
其他的
{
jQuery（'#footer'）.fadeOut（）；
}
}
});
正文{
背景：#eee；
高度：300vh；
}
#页脚{
显示：无；
背景：#dfd；
}
@仅介质屏幕和（最大宽度：780px）{
#页脚{
位置：固定；
右：0；
底部：0；
左：0；
填充：1rem；
z指数：10；
}
}

这是我的页脚。
jQuery只知道它是在浏览器中运行的。媒体查询也有最小宽度
fadeIn
的概念，可以更改
不透明度。您仍然可以更改其他属性。对于使用媒体查询的PC设备，尝试使用
display:none
。如上所述：
minwidth:780px
我已经尝试插入媒体查询minwidth并显示none，但没有成功。在JS代码中没有什么可以更改的？@media-only屏幕和（minwidth:780px）{#footer{display:none；}}minwidth在没有jquery代码的情况下运行良好。当我添加jquery时，它会显示在PC屏幕上。有什么想法吗？