Div 在 Code Pen 桌面上工作但在移动设备上打开时无法工作的背景图像

问题描述

在 Code Pen 上，我有一系列带有背景图像的 div，这些 div 无法在移动设备上正确呈现（我正在测试 iPhone XR 上的 safari/chrome）。

它在 Code Pen 上完美运行，随着视口缩小，背景会正确调整大小，然后在我指定的断点处切换到适合移动设备的背景图像，但在手机上则完全没有。感觉就像在手机上放大了一样。

项目：https://codepen.io/learntocodequickly/pen/yLaWPKg

.first {
    background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-12-1.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #333333;  
}
@media screen and (max-width: 600px) { 
        .first {
            background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-12-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    width: 100%;
    background-color: #333333;  
        }
    }

尝试将媒体信息添加到头部（在某处看到过）并且我尝试从封面属性切换到 100% 宽度但没有成功，我不确定问题出在哪里。

感谢任何帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

background breakpoints codepen