1. 如何通过JavaScript设置window.width？ #

首先得明确：浏览器的当前窗口宽度是受用户系统/浏览器控制的，JavaScript没有直接修改它的权限——这是出于安全和用户体验的考量，防止脚本随意篡改用户的窗口布局。

不过有两种场景可以间接控制窗口尺寸：

• 打开新窗口时指定宽度：用window.open()方法的参数可以定义新窗口的大小：

  // 打开一个宽600px、高400px的新窗口
  window.open('https://example.com', '_blank', 'width=600,height=400');
  

• 调整页面内元素的宽度：如果是指页面内某个元素（比如iframe、div）的宽度，直接修改其style属性即可：

  document.getElementById('target-element').style.width = '800px';
  

另外要注意，你提到的window.width不是标准属性，正确获取窗口可视宽度的方式是window.innerWidth（包含滚动条）或document.documentElement.clientWidth（不含滚动条）。

2. 移动端滚动时Logo异常显示的解决方案 #

你的问题核心出在逻辑运算符优先级和条件判断的逻辑漏洞上。原代码里的条件document.body.scrollTop > 550 || document.documentElement.scrollTop > 550 && window.width > 375会被浏览器优先解析&&部分，实际等价于：

(页面滚动超过550px) || (页面滚动超过550px 且 窗口宽度>375px)

这就导致：当窗口宽度<375px时，只要滚动超过550px，第一个条件就会触发logo切换；而回到顶部时，else分支直接执行，不管窗口大小都显示经典logo，这就是你看到的异常。

下面给你两种可行的解决方案：

方案一：小屏幕下直接跳过滚动逻辑 #

这种方式最直观，确保窗口宽度<375px时完全不执行滚动相关的logo切换，还能强制重置logo状态：

// 提前获取DOM元素，避免重复查询提升性能
const header = document.getElementById("header");
const classicLogo = document.getElementById('classic-logo');
const minifyedLogo = document.getElementById('minifyed-logo');

window.onscroll = scrollFunction;
// 新增窗口 resize 监听，确保窗口大小变化时logo状态正确
window.addEventListener('resize', handleResize);

function scrollFunction() {
  // 窗口宽度小于375px时，直接重置状态并退出
  if (window.innerWidth < 375) {
    resetLogoState();
    return;
  }

  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > 550) {
    header.style.height = "80px";
    classicLogo.style.display = "none";
    minifyedLogo.style.display = "block";
  } else {
    resetLogoState();
  }
}

function handleResize() {
  if (window.innerWidth < 375) {
    resetLogoState();
  } else {
    // 大屏下根据当前滚动位置更新状态
    scrollFunction();
  }
}

// 封装重置logo状态的函数，避免重复代码
function resetLogoState() {
  header.style.height = "100px";
  minifyedLogo.style.display = "none";
  classicLogo.style.display = "block";
}

方案二：修正条件判断逻辑 #

如果你不想完全跳过滚动逻辑，只是想在小屏幕下不切换logo，可以调整条件的优先级，用括号明确逻辑关系：

const header = document.getElementById("header");
const classicLogo = document.getElementById('classic-logo');
const minifyedLogo = document.getElementById('minifyed-logo');

window.onscroll = scrollFunction;
window.addEventListener('resize', scrollFunction);

function scrollFunction() {
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // 只有当窗口宽度>375px 且 滚动超过550px时，才切换到精简logo
  if (window.innerWidth > 375 && scrollTop > 550) {
    header.style.height = "80px";
    classicLogo.style.display = "none";
    minifyedLogo.style.display = "block";
  } else {
    resetLogoState();
  }
}

function resetLogoState() {
  header.style.height = "100px";
  minifyedLogo.style.display = "none";
  classicLogo.style.display = "block";
}

额外提示 #

• 用window.innerWidth代替window.width：window.width不是标准API，window.innerWidth才是获取窗口可视宽度的正确方法。
• 监听resize事件：用户调整窗口大小时，同步更新logo状态，避免出现窗口大小变化后logo状态不匹配的问题。
• 封装重复代码：把重置logo状态的逻辑抽成函数，减少代码冗余，也方便后续维护。

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