Html IOS Safari背景图像未使用@Media和CSS显示

我一直在努力解决这个问题，但运气不好。我有一套背景图片，一套全尺寸的桌面图片和一套经过手机优化的图片

现在，当我在桌面上的Chrome上运行以下代码并调整浏览器大小以激活

@媒体时，一切都运行良好，看起来都是正确的。但是当我在IPhone上进行safari测试时，我得到了一个空白点，背景图像应该在哪里

<meta name="viewport" content="width=device-width, initial-scale=1">


section.box_park {
    min-height: 500px;
    background: url('/images/sample-park.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

section.box_building_management {
    min-height: 500px;
    background: url('/images/building-management.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media only screen and (max-width: 420px) {

    section.box_building_management {
        background: url('/images/mobile-building-management.jpg') no-repeat center center fixed; 
    }

    section.box_park {
        background: url('/images/mobile-sample-park.jpg') no-repeat center center fixed; 
    }

}


第1节博思公园{
最小高度：500px；
背景：url（'/images/sample park.jpg'）无重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
第3.1节箱盒建筑管理{
最小高度：500px；
背景：url（'/images/building management.jpg'）无重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
@仅介质屏幕和（最大宽度：420px）{
第3.1节箱盒建筑管理{
背景：url（'/images/mobile build management.jpg'）无重复中心；
}
第1节博思公园{
背景：url（'/images/mobile sample park.jpg'）无重复中心；
}
}

知道为什么会这样吗

*更新*

如果我注释掉@media，它将显示背景图像，但显然不是手机优化的图像。
非常确定您需要在媒体侧添加
宽度：
，或者至少添加高度您在页面中添加了吗？是的，这是代码