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

Question

奇怪的问题：我正在开发一个引导响应站点，并使用Chrome开发人员工具设备模拟器来查看外观。不幸的是，我在Chrome Devtools上看到的内容并不像我在实际的手机上看到的那样。

出于某种原因，我的背景图像不正确传播。该主页上的五张幻灯片中有四张注意到缺陷。

<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> 

嗯..我想知道如果其任一使用的VH（图端口单元？）或可能是双重使用的背景颜色：白色;和背景图像:(我使用透明背景的.png，所以我需要那里的白色。）？

所以显而易见的问题是，为什么模拟器不能精确地匹配实际的移动设备？这是Chrome开发人员工具中的错误吗？

AAAAAaarggh！我只用三星Galaxy S5与Chrome浏览器测试了同一个网站，并且它与Chrome浏览器模拟器看起来一样。完善！所以......这是否意味着铬错误在其iPhone模拟器的细节（或...是苹果在这里过错？）

注：是的，我意识到涉及移动（视觉视口vs布局视口）参考：A Tale of Two Viewports.

我将尝试将所有的vh和vw的转换为像素，然后重新测试。但我仍然为什么模拟器中的差异感到困惑。再说一次，如果这是一个错误提交，并且是谁...... Apple或Chrome的人？

更新：我正在努力将所有VW和VH转换为像素，但到目前为止在屏幕上逐个屏幕的基础上，这是一个失败。我真的认为这与CSS和背景大小和背景位置有关。看看这张幻灯片中的背景图片，模拟器vs iphone。

<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;" > 

还有一件事我刚才注意到：我已经设置了background-attachment: fixed;，这就是他们在模拟器上是如何工作的。在三星，我可以看到所有五个幻灯片的背景，但他们做滚动。在iPhone上，我无法看到大部分幻灯片的背景。整件事情很奇怪。

糟糕：Background-fixed, not so hot on mobile...

Answer 1

呃。答案是不使用background-attachment: fixed;用于移动设备。

裁判：How to replicate background-attachment fixed on iOS和Fixed background image with ios7

嗯..如若开发工具模拟器可以帮助您在这个主题？这应该是谷歌Chrome团队的一个建议功能吗？

Answer 2

的Safari在iPhone上具有用于图像特定大小限制（JPG高达32百万像素，GIF/PNG 3-5百万像素取决于装置）。

你可以尝试在背景图像中使用不同的较小的（分辨率）图像吗？