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

Question

奇怪的问题：我正在开发一个 bootstrap 响应式网站，并使用 Chrome 开发人员工具设备模拟器来查看它的外观。不幸的是，我在 Chrome Devtools 上看到的与我在实际手机上看到的完全不同 phone。

出于某种原因，我的背景图像无法正确传播。该主页上五张幻灯片中的四张都指出了该缺陷。

<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 浏览器的 Samsung Galaxy S5 测试了同一个站点，它看起来与 Chrome 浏览器模拟器相同。完美的！那么...这是否意味着 Chrome 在其 iPhone 模拟器的详细信息中出错（或者...苹果在这里有错吗？）

注意：是的，我知道涉及移动设备的问题（视觉视口与布局视口）参考：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;，这就是它们在模拟器上的工作方式。在 Samsung 上，我可以看到所有五张幻灯片的背景，但它们会滚动。在 iPhone 上，我看不到大多数幻灯片的背景。整件事很奇怪。

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

Answer 1

iPhone 上的 Safari 对图像有一定的大小限制（JPG 最大 32 兆像素，GIF/PNG 3-5 兆像素，具体取决于设备）。

你能尝试使用不同的、更小的（分辨率）图像作为背景图像吗？

Answer 2

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

参考：How to replicate background-attachment fixed on iOS and Fixed background image with ios7

嗯.. 开发工具仿真器应该帮助您解决这个问题吗？这应该是 Google Chrome 团队的建议功能吗？

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

Background Image -- Chrome Dev Tools Mobile Emulator Doesn't Match Actual Device (iPhone)

css

iphone

google-chrome

google-chrome-devtools