Div在代码笔桌面上工作，但在移动设备上打开时不能工作的背景图像

Question

在Code Pen上，我有一系列带有背景图像的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%宽度，没有运气，我不确定问题发生在哪里。

感谢您的帮助!

Answer 1

在标题设置中使用"插入最常用的视图端口元标签"要自动添加！ 此外，在你的CSS字体设置尝试使用5vw而不是5em。您需要调整桌面视图的数字。当屏幕变小时，大众自动缩小字体大小。head

的编码设置