移动端的条件Javascript

Question

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

我希望我的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>

...and；

<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"/>

但是，即使在禁用此代码段(从代码中完全删除它)之后，仍然会出现相同的问题。

我是不是漏掉了什么明显的东西？解决方案是不存在的吗？

在此之前，非常感谢您。

Answer 1

你不需要JS来解决这个问题。只需使用媒体查询+适当的meta标记即可。请参阅this gist以了解我正在讨论的内容。