Css 背景图片--Chrome开发工具移动模拟器不'；与实际设备（iPhone）不匹配

奇怪的问题：我正在一个引导响应的站点上工作，并使用Chrome开发者工具设备模拟器来查看情况。不幸的是，我在ChromeDevTools上看到的与我在实际手机上看到的完全不同

由于某些原因，我的背景图像传播不正确。该主页上的五张幻灯片中有四张显示了该缺陷

<div id="slide-2m" class="gf_mobile" style=" height: 100%; margin: 0 auto; 
            overflow: hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/oranges_mobile.png);
            background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; padding: 40px 0;" >
    <div style="height: 100%; overflow: hidden; margin-top: 20%;" >
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/who_we_are_text_883x862.png" style="width: auto; height: 55vh;">
    </div>
    <div style="height: 100%; overflow: hidden; margin-top: -300px;">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/sqf_logo_883x862.png" style="width: auto; height: 55vh; ">
    </div>
</div>

---

iPhone上的Safari对图像有一定的大小限制（JPG高达3200万像素，GIF/PNG 300-500万像素，具体取决于设备）

---

你能试着用另一个更小（分辨率）的图像作为背景图像吗。答案是不要使用

后台附件：固定用于移动设备

参考：和

嗯。。开发工具仿真器是否应该在这个主题上帮助您？这应该是谷歌Chrome团队的建议功能吗？
我可以试试。oranges_mobile.png是640K大，768 x 823像素。页面上没有一张图像大于2 Meg，尽管有很多。。
显示中的所有内容：无包装器。我要说，有一件事很奇怪。我在iphone上使用Chrome浏览器。我有一个用于故障排除的附加工具。它显示浏览器大小和浏览器id。。在使用Chrome浏览器的iphone上，它显示“safari”是指谷歌和苹果的一些折衷方案必须在iphone上启用Chrome浏览器？这可能是图像的数量，总量也有限制。是的，iPhone上的Chrome使用Safari的渲染引擎（应用商店的合同义务）。我认为Chrome无法真正模拟所有的怪癖。我建议使用Xcode附带的iOS模拟器来测试iPhone，附带的Safari版本几乎模拟了所有问题。您还必须在真实设备上进行测试，以及一些未模拟的内容（如内存限制）。
<div id="slide-4m"  class="gf_mobile" style=" height: 100%; margin: 0 auto; overflow: 
            hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/farm_field_1018x474.jpg);
            background-repeat: no-repeat; background-position: center center; background-attachment: fixed; 
            background-size: cover; padding: 40px 0;" >