JavaScript滚动缩放头部移动端适配：如何禁用滚动效果或修复？

你的代码问题出在逻辑顺序上——不管滚动状态如何，最后都会强制覆盖移动端的字体大小，而且当前的字号在移动端确实过大。下面提供两种解决思路：

方案一：让滚动字号调整逻辑在移动端完全不生效 #

直接在函数开头判断设备类型，若是移动端则跳过后续的滚动调整逻辑，保持移动端默认的字体大小（或者你可以提前在CSS里给移动端设置固定字号）。

修改后的代码：

function scrollFunction() {
  // 判断是否为移动端，是则直接返回，不执行滚动调整
  if (/Mobile/.test(navigator.userAgent)) {
    return;
  }
  
  // 非移动端执行原有滚动字号调整逻辑
  if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
    document.getElementById("header").style.fontSize = "5em";
  } else {
    document.getElementById("header").style.fontSize = "10em";
  }
}

补充：如果觉得navigator.userAgent判断不够准确，可以换成基于屏幕宽度的判断，比如把移动端判断改成if (window.innerWidth < 768)（768px是常见的移动端断点，可根据你的需求调整）。

方案二：给移动端单独设置适配的滚动字号 #

如果不想完全禁用滚动调整功能，而是让移动端也有字号变化但用更适配的数值，可以把移动端判断嵌套进滚动逻辑里：

修改后的代码：

function scrollFunction() {
  const isMobile = /Mobile/.test(navigator.userAgent);
  const header = document.getElementById("header");
  
  if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
    header.style.fontSize = isMobile ? "2em" : "5em";
  } else {
    header.style.fontSize = isMobile ? "3em" : "10em";
  }
}

这样移动端会根据滚动状态切换字号，但数值都是适配移动端的大小，不会出现字体过大的问题。

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