如何阻止 PHP 页面中的 JavaScript 代码段在屏幕分辨率较小的设备上加载

How to stop a javascript snippet in a PHP page from loading on devices with smaller screen resolutions

本文关键字：分辨率 屏幕 加载 PHP 何阻止 代码 JavaScript      更新时间：2023-09-26

我在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);

问题是，在更大的分辨率下，一切都很好，响应迅速，一直到宽度低至 688px。

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

有没有办法基本上说：

"不要以 687 像素宽度或更小的设备分辨率加载此 JavaScript 片段"？

在NCDP网站上帮助我解决此问题的任何指导将不胜感激！

更新：

当我将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，只需始终显示菜单。

您可以访问 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);
}
相关文章：