Angular 18移动端背景图不显示求助：桌面及Chrome工具正常

我重构了个人网站，使用媒体查询为不同设备展示不同背景图。桌面端及Chrome开发者工具测试各设备尺寸均正常，但部署后在真实手机（Chrome、Safari及他人设备）上背景图无法显示。调整图片尺寸无效，推测是代码问题。

样式代码 #

.showcase-button {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.showcase:hover {
    opacity: 0.7;
    cursor: pointer;
}

.about-me-section {
    background: url("/assets/about-me-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F7F7F7 !important;
}

.home-section {
    background: url("/assets/home-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white !important;
    font-size: 12 !important;
}

@media (max-width: 480px) {
    .home-section {
        background: url("/assets/home-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .home-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .home-section {
        background: url("/assets/home-bk-tablet.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 480px) {
    .about-me-section {
        background: url("/assets/about-me-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 16 !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .about-me-section {
        background: url("/assets/about-me-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .about-me-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

HTML代码 #

<app-header></app-header>
<div #home name="home" class="h-screen home-section">

</div>
<div #portfolio name="portfolio" class="h-full bg-gray-100">
  <div class="grid m-0 pt-6">
    <div class="col-12 lg:col-6 relative showcase" (click)="goToLink(1)">
      <img src="assets/natrium-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase lg:mt-8" (click)="goToLink(2)">
      <img src="assets/urban-sweets-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase" (click)="goToLink(3)">
      <img src="assets/carolecolt-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase lg:mt-8" (click)="goToLink(4)">
      <img src="assets/hoopfire-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
  </div>
</div>
<div #about name="about" class="h-screen about-me-section">
  <div class="flex h-full p-8 lg:p-0 lg:justify-content-end lg:align-items-center">
    <div class="w-full text-center lg:text-right lg:w-5 lg:mr-8 lg:text-3xl">
      <p style="background: #ffffffa8;">
        I am a full stack developer with a personal priority focus on front end development and web design. I currently reside
        in Charlotte, NC. and work for Data Ventures. Developing unique and engaging websites and web applications is a
        passion of mine. Most of my current work (along with this website) exhibits my proficiency in the utilization of
        Angular. However, I enjoy expanding my knowledge by learning new and exciting languages that will help to further my
        craft in web development.
      </p>
      <p style="background: #ffffffa8;">
        When I'm not immersed in code and web applications, I enjoy sports of almost any kind. Because of the complexity and
        spontaneity of these two worlds, finding ways to incorporate web design and sports has become a passion of mine. Apart
        from this, my aspirations include exploring new ways to display and interact with the user, regardless of the content.
        Overall, I enjoy building websites and creating web applications, watching movies and playing basketball with my
        amazing wife (3x Co-Ed league champs), hanging out with our adorable Miniature Dachshund, watching my son grow up,
        sipping on a nice cold beer, and just enjoying what life decides to throw at me.
      </p>
    </div>
  </div>
</div>

问题排查与修复方案 #

1. 核心问题：background-attachment: fixed 移动端兼容性bug #

iOS Safari及部分安卓浏览器对background-attachment: fixed的实现存在严重问题，会导致背景图无法渲染、位置偏移或内存占用过高，这是移动端背景图消失的最可能原因。

修复方式：
移除所有样式中的background-attachment: fixed，替换为默认的scroll：

/* 修改基础样式 */
.about-me-section {
    background: url('/assets/about-me-bk.png');
    background-position: center center;
    background-attachment: scroll; /* 替换fixed */
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F7F7F7 !important;
}

.home-section {
    background: url('/assets/home-bk.png');
    background-position: center center;
    background-attachment: scroll; /* 替换fixed */
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white !important;
    font-size: 12px !important; /* 补上px单位 */
}

/* 媒体查询中同步移除fixed属性 */
@media (max-width: 480px) {
    .home-section {
        background: url('/assets/home-bk-phone.png');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

2. 图片路径转义问题 #

样式中的图片URL使用了"转义双引号，虽然语法合法，但部分移动端浏览器解析时可能出现异常。建议直接使用单引号或无引号（路径无空格时）：

/* 错误写法 */
background: url("/assets/home-bk.png");
/* 推荐写法 */
background: url('/assets/home-bk.png');

3. 样式规范问题 #

• font-size: 12 !important;和font-size: 16 !important;缺失px单位，这是不规范写法，可能导致移动端样式异常，需补上单位。
• 存在重复的媒体查询规则（两个@media (max-width: 480px)），建议合并规则，避免样式覆盖冲突。

4. 资源存在性验证 #

用Chrome DevTools远程调试移动端设备，查看网络请求中背景图的返回状态：

1. 打开Chrome DevTools → 点击「更多工具」→「远程设备」
2. 连接手机后，检查对应背景图资源是否返回404（路径错误）或200（正常加载）。如果是404，需确认部署后的资源路径是否和本地一致。

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