用于移动的条件Javascript

几个星期以来，我一直在尝试解决这个问题的各种方法!(

我希望我的javascript根据设备宽度有条件地加载。这样，我的固定菜单div将滚动屏幕在桌面上，并保持放在移动/平板电脑上。

这是我的脚本;

<script type="text/javascript">
jQuery(function($) {
function fixDiv() {
  if ($(window).scrollTop() > 310)
    { 
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
    }
  else
    {
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'});
    }
}
$(window).scroll(fixDiv);
fix5iv();
}
});
</script>

我试过添加;

<script type="text/javascript">
jQuery(function($) {
if ( $(window).width() > 480) {
function fixDiv() {
  SCRIPT FUNCTION
}
});
</script>

…;

<script type="text/javascript">
jQuery(function($) {
if (matchMedia('only screen and (max-width: 480px)').matches) {
function fixDiv() {
  SCRIPT FUNCTION
}
});
</script>

我也尝试了使用CSS的@media查询来改变基于设备宽度的div的定位。这没有任何结果，看起来javascript样式很重要，因此覆盖了我在样式表中应用的任何样式。

javascript更改，我已经尝试禁用或启用脚本在移动/平板电脑和桌面。所以我的代码可以工作，但它似乎不能正确检测设备宽度。

很明显，我的视口设置可能会中断设备宽度，在任何浏览器中产生相同的结果;

<meta name="viewport" content="width=1100"/>

然而，即使禁用了这个代码片段(从代码中完全删除它)，同样的问题仍然会发生。

我错过了什么明显的吗?解决方案不存在吗?

提前感谢。