条件语句未匹配目标屏幕宽度的响应式JS适配问题

看起来你的代码有几个需要调整的地方，我来一步步帮你解决：

1. 补全未完成的代码片段 #

首先你代码里的removeCl...明显没写完，应该补全为完整的移除类名调用：

$('body').removeClass('secondBg');

2. 修正屏幕宽度的判断条件 #

你当前的条件screenWidth <= 812 && screenWidth > 414只覆盖了窄平板到大屏手机的区间，如果你的目标设备宽度不在这个范围，自然不会触发逻辑。你可以根据需求调整数值：

• 若要覆盖所有手机设备，可以改成screenWidth <= 768
• 若要针对小屏手机（比如iPhone SE系列），可以改成screenWidth <= 375
• 要是有特定的目标宽度区间，直接修改数值即可，比如覆盖平板到手机：screenWidth <= 1024

3. 优化响应式逻辑（支持窗口 resize 动态判断） #

当前代码只在页面加载时获取一次屏幕宽度，当用户调整窗口大小（比如桌面端缩放窗口、平板横竖屏切换）时，不会重新触发判断。你可以把逻辑封装成函数，在页面加载和窗口变化时都执行：

function handleBgScrollEffect() {
  var screenWidth = window.innerWidth;
  // 替换成你的目标宽度条件
  if (screenWidth <= 768) {
    // 先移除之前绑定的滚动事件，避免重复触发
    $(window).off('scroll.bgChange');
    $(window).on('scroll.bgChange', function() {
      var fromTopPxFirstBgChange = 2300;
      var scrolledFromTop = $(window).scrollTop();
      if (scrolledFromTop > fromTopPxFirstBgChange) {
        $('body').addClass('secondBg');
      } else {
        $('body').removeClass('secondBg');
      }
    });
  } else {
    // 屏幕宽度超出目标范围时，移除滚动事件并重置背景类
    $(window).off('scroll.bgChange');
    $('body').removeClass('secondBg');
  }
}

// 页面初始化时执行
$(document).ready(function() {
  handleBgScrollEffect();
});

// 窗口大小改变时重新执行判断
$(window).resize(function() {
  handleBgScrollEffect();
});

额外小建议：结合CSS媒体查询更高效 #

如果你的secondBg只是样式变化，建议配合CSS媒体查询使用，让样式逻辑交给CSS处理，JS只负责控制类名：

@media (max-width: 768px) {
  body.secondBg {
    /* 这里写移动端的背景样式 */
  }
}

这样代码分工更清晰，也能减少JS的压力。

内容的提问来源于stack exchange，提问作者D-Man