如何基于移动端屏幕尺寸设置JS条件，让Header小屏初始收缩？

你的代码问题主要出在这几个地方：

• 依赖jQuery的$(window).width()，如果页面没引入jQuery，这行代码直接失效；就算引入了，判断逻辑也存在漏洞
• 初始化时的hh变量不会随Header高度变化更新，导致后续判断hh ===80完全不准确
• 移动端的分支逻辑写反了，进入else后直接return，根本没执行收缩Header的代码

下面是修正后的原生JS代码，逻辑更清晰可靠：

<script>
  // 判断是否为移动端
  function isMobile() {
    return window.innerWidth < 768;
  }

  var shrinkHeader = function(){
    const header = document.getElementById('header');
    const content = document.getElementById('content');

    // 移动端直接强制设置收缩状态，无视滚动位置
    if (isMobile()) {
      header.style.height = '70px';
      content.style.paddingTop = '70px';
      header.classList.add("small-image");
      return;
    }

    // 桌面端按滚动逻辑处理
    if(window.scrollY === 0){
      header.style.height = '125px';
      content.style.paddingTop = '125px';
      header.classList.remove("small-image");
    }else{
      // 直接判断当前高度，避免重复执行相同操作
      if(header.offsetHeight !== 70){
        header.style.height = '70px';
        content.style.paddingTop = '70px';
        header.classList.add("small-image");
      }
    }
  }

  window.onload = shrinkHeader;
  window.onscroll = shrinkHeader;
  // 新增窗口 resize 监听，确保缩放窗口时状态同步更新
  window.onresize = shrinkHeader;
</script>

关键修改点说明 #

• 用原生window.innerWidth替代jQuery方法，消除第三方依赖
• 移动端单独分支处理，直接强制收缩状态，逻辑更直白
• 去掉过时的hh变量，每次直接获取当前Header高度做判断，避免初始值失效
• 缓存header和content元素，减少重复DOM查询，提升性能
• 新增窗口大小变化监听，适配用户缩放窗口的场景

额外建议：可以把Header的高度值用CSS变量定义，比如：

:root {
  --header-full: 125px;
  --header-shrink: 70px;
}

之后JS里通过getComputedStyle(document.documentElement).getPropertyValue('--header-full')获取值，这样修改尺寸时只需改动CSS，无需调整JS代码，维护更便捷。

内容的提问来源于stack exchange，提问作者thma23