移动端首页Banner模糊求助：桌面端正常，真机显示模糊放大

我为首页首屏区域制作了自定义Banner替代滑块组件，桌面端显示正常，甚至把浏览器窗口缩到手机宽度也没问题，但实际移动设备上背景图模糊且过度放大，相关代码及效果如下：

原代码 #

JavaScript #

function EasyPeasyParallax() {
  const scrollPos = $(this).scrollTop();

  // 调整背景位置实现视差效果
  $('#custom-banner').css({
    'background-position': '50% ' + (-scrollPos / 6) + "px"
  });

  // 调整Banner文本位置
  const bannerHeight = $('#custom-banner').height();
  let newTop = 20 + (scrollPos * 0.1); // 调整系数控制视差速度

  // 限制文本移动范围
  if (newTop < 20) newTop = 20;
  if (newTop > bannerHeight) newTop = bannerHeight;

  $('#bannertext').css({
    'top': newTop + '%',
    'opacity': 1 - (scrollPos / 250)
  });
}

$(document).ready(function() {
  $(window).scroll(function() {
    EasyPeasyParallax();
  });
});

CSS #

#custom-banner h1 {
  font: 700 2.8em/1.2;
  margin: 0;
  color: white;
}

#custom-banner p {
  color: white;
  font-family: "Cormorant Infant", Sans-serif;
  font-size: 24px;
  font-weight: 500;
}

#custom-banner {
  background: url(https://houniqueconstruction.com/wp-content/uploads/2023/09/an-awards-bg-par1.jpg) no-repeat fixed 50% 50%;
  background-size: cover;
  color: #fff;
  height: 90vh;
  width: 100%;
  position: relative;
}

#bannertext {
  width: 35em;
  position: absolute;
  /* 从fixed改为absolute */
  top: 20%;
  left: 50%;
  border: .5em solid #fff;
  transform: translateX(-50%);
  padding: 2em 0;
  text-align: center;
}

/* 小屏幕媒体查询 */
@media (max-width: 768px) {
  #custom-banner {
    height: 70vh;
  }
  #custom-banner h1 {
    font-size: 2em;
  }
  #bannertext {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1em 0;
  }
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-banner">
  <div id="bannertext">
    <h1>Los Angeles’ Premier Home Remodeling Contractor</h1>
    <p>Finest Construction Since 1992.</p>
  </div>
</div>

移动端异常效果：

问题原因 #

1. background-attachment: fixed移动端兼容性缺陷：移动浏览器会将固定背景图按整个文档尺寸渲染，而非Banner容器尺寸，导致背景被过度拉伸放大
2. 高DPI屏幕适配不足：原背景图在高分辨率移动屏幕上，background-size: cover会进一步放大图像，加剧模糊问题

修复方案 #

核心修改逻辑 #

针对移动设备移除background-attachment: fixed，改用scroll，同时保留桌面端的视差效果；可选关闭移动端视差逻辑，进一步优化体验。

修改后的完整代码 #

CSS（重点调整媒体查询部分）

#custom-banner h1 {
  font: 700 2.8em/1.2;
  margin: 0;
  color: white;
}

#custom-banner p {
  color: white;
  font-family: "Cormorant Infant", Sans-serif;
  font-size: 24px;
  font-weight: 500;
}

#custom-banner {
  background: url(https://houniqueconstruction.com/wp-content/uploads/2023/09/an-awards-bg-par1.jpg) no-repeat fixed 50% 50%;
  background-size: cover;
  color: #fff;
  height: 90vh;
  width: 100%;
  position: relative;
}

#bannertext {
  width: 35em;
  position: absolute;
  top: 20%;
  left: 50%;
  border: .5em solid #fff;
  transform: translateX(-50%);
  padding: 2em 0;
  text-align: center;
}

/* 小屏幕媒体查询 */
@media (max-width: 768px) {
  #custom-banner {
    height: 70vh;
    /* 移除固定背景，改用滚动模式 */
    background-attachment: scroll;
    /* 确保背景图居中适配容器 */
    background-position: center center;
  }
  #custom-banner h1 {
    font-size: 2em;
  }
  #bannertext {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1em 0;
  }
}

JavaScript（可选：移动端禁用视差）

如果希望移动端完全关闭视差效果，可修改JS代码：

function EasyPeasyParallax() {
  // 判断是否为移动设备
  const isMobile = window.innerWidth <= 768;
  if (isMobile) return;
  
  const scrollPos = $(this).scrollTop();

  $('#custom-banner').css({
    'background-position': '50% ' + (-scrollPos / 6) + "px"
  });

  const bannerHeight = $('#custom-banner').height();
  let newTop = 20 + (scrollPos * 0.1);

  if (newTop < 20) newTop = 20;
  if (newTop > bannerHeight) newTop = bannerHeight;

  $('#bannertext').css({
    'top': newTop + '%',
    'opacity': 1 - (scrollPos / 250)
  });
}

$(document).ready(function() {
  $(window).scroll(function() {
    EasyPeasyParallax();
  });
});

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