1

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

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

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

我错过了一些明显的东西吗？解决方案不存在吗？

提前谢谢了。

4

1 回答 1

1

你不需要 JS 来解决这个问题。只需使用媒体查询 + 适当的元标记。请参阅此要点了解我在说什么。

于 2013-06-05T16:09:55.880 回答