移动设备的条件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>

jQuery（函数（$）{
函数fixDiv（）{
如果（$（窗口）.scrollTop（）>310）
{ 
$（#公文包边栏内容Web'）.css（{'position'：'fixed'，'top'：'0'，'MarginTop'：'20px'）；
}
其他的
{
$（#公文包边栏内容Web'）.css（{'position'：'static'，'top'：'auto'，'margintop'：'0'）；
}
}
$（窗口）。滚动（fixDiv）；
fix5iv（）；
}
});

我试着加上

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

jQuery（函数（$）{
如果（$（窗口）.width（）>480）{
函数fixDiv（）{
脚本函数
}
});

……和

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

jQuery（函数（$）{
如果（匹配媒体（'仅屏幕和（最大宽度：480px）'）。匹配）{
函数fixDiv（）{
脚本函数
}
});

我还尝试了使用CSS的@media查询来根据设备宽度更改div的位置。这没有任何结果，似乎javascript样式非常重要，因此覆盖了我在样式表中应用的任何样式

我尝试在手机/平板电脑和桌面上禁用或启用脚本的javascript更改。因此，我的代码在某种程度上可以工作，但似乎无法正确检测设备宽度

很明显，我的视口设置可能会中断设备宽度，从而在任何broswer中产生相同的结果

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

但是，即使在禁用此代码段（将其从代码中完全删除）之后，仍然会出现相同的问题

我是否遗漏了一些明显的东西？解决方案是否不存在

---

非常感谢。

您不需要JS来解决此问题。只需使用媒体查询+适当的元标记。请参阅我所说的内容。

您不需要JS来解决此问题。只需使用媒体查询+适当的元标记。请参阅我所说的内容