javascript - 如何阻止 PHP 页面中的 javascript 片段加载到屏幕分辨率较小的设备上

Question

我在 WordPress 页面上加载了一个 javascript 片段，所以语言是 PHP。

看起来像这样:

(function($) {
    $(document).ready(function() {
        var primaryNav = $('body.home').find('nav.nav-primary');
        primaryNav.hide();
        $(window).scroll(function() {
            if ($(this).scrollTop() > 150) {
                primaryNav.fadeIn();
            } else {
                primaryNav.fadeOut();
            }
        });
    });
})(jQuery);

问题是，在宽度一直下降到 688 像素的较大分辨率下，一切都响应良好。

当我将宽度降至 687 像素时，向下滚动时菜单不显示，这是个问题。

有没有办法基本上说:

“不要以 687 像素宽度或更小的设备分辨率加载此 javascript 代码段”？

在 NCDP site 上帮助我解决这个问题的任何指导将不胜感激!

更新:

当我将 Ianaya 的代码片段合并到 NCDP 上时:

<script type="text/javascript">
if (window.screen.availWidth > 687) {

  (function($) {
    $(document).ready(function() {
      var primaryNav = $('body.home').find('nav.nav-primary');
        primaryNav.hide();
        $(window).scroll(function() {
          if ($(this).scrollTop() > 150) {
            primaryNav.fadeIn();
          }
          else {
            primaryNav.fadeOut();
          }
        });
    });
  })(jQuery);

}

当向下滚动 150 像素时菜单不加载，而此时应该显示菜单——或者，如果我可以在小于 688 像素的设备上隐藏此 javascript，则始终显示菜单。

Answer 1

您可以访问window.screen检测设备分辨率的对象:

if (window.screen.availWidth > 687) {

  (function($) {
    $(document).ready(function() {
      var primaryNav = $('body.home').find('nav.nav-primary');
        primaryNav.hide();
        $(window).scroll(function() {
          if ($(this).scrollTop() > 150) {
            primaryNav.fadeIn();
          }
          else {
            primaryNav.fadeOut();
          }
        });
    });
  })(jQuery);

}