移动端背景图显示异常：Chrome DevTools正常真机显示问题

核心原因 #

你的问题主要出在iOS Safari对background-attachment: fixed的兼容性处理缺陷：当固定背景附着结合background-size: cover使用时，iOS会出现背景图无法正确渲染到容器内的情况——Chrome DevTools的移动端模拟器并未完全还原iOS Safari的渲染逻辑，因此测试正常但真机失效。

另外需确认两个细节：

• 你的媒体查询范围max-width:580px已覆盖iPhone 14 Pro Max的屏幕宽度（430px），媒体查询本身是生效的；
• 图片路径/img/ader/mobileback3.jpeg在真机上可正常加载（DevTools测试正常说明路径本身无问题，但可检查服务器是否开启大小写敏感，比如图片实际后缀为.JPEG）。

修复方案 #

1. 移除移动端的background-attachment: fixed #

iOS Safari对固定背景的支持一直存在问题，建议在移动端媒体查询中删除该属性（默认值为scroll）：

@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center; /* 替换bottom为center，适配更多设备 */
        /* 移除 background-attachment: fixed; */
    }
}

2. 确保Hero区块有明确高度 #

如果#hero未设置高度，可能因移动端内容高度不足导致背景图无法显示，建议添加最小高度：

#hero {
    width: 100%;
    min-height: 100vh; /* 确保占满视口高度 */
    background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/heroback.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

3. 备选方案：用伪元素模拟固定背景 #

如果需要保留固定背景效果，可通过伪元素实现，规避iOS兼容性问题：

#hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

#hero::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/heroback.jpg);
    background-size: cover;
    z-index: -1;
}

@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero::before {
        background-image: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/mobileback3.jpeg);
        background-position: center;
    }
}

验证建议 #

修改后可通过Safari远程调试功能连接iPhone 14 Pro Max，直接查看元素CSS属性与背景图加载状态，确认问题是否解决。

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