【发布时间】：2015-10-08 20:10:53
【问题描述】：
奇怪的问题：我正在开发一个引导响应站点，并使用 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 （视口单位？）还是双重使用 background-color: white;和背景图像：（我使用的是透明背景的.png，所以我需要那里的白色。）？
那么显而易见的问题是，为什么模拟器不能准确匹配实际的移动设备？这是 Chrome 开发者工具中的错误吗？
啊啊啊啊啊！我刚刚使用带有 Chrome 浏览器的三星 Galaxy S5 测试了同一个站点，它看起来与 Chrome 浏览器模拟器相同。完美的！那么……这是否意味着 Chrome 在其 iPhone 模拟器的细节上出错了（或者……Apple 有过错吗？）
注意：是的，我知道涉及移动（视觉视口与布局视口）的问题参考：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 上，我看不到大多数幻灯片的背景。整件事很奇怪。
【问题讨论】：
标签： css iphone google-chrome google-chrome-devtools