Question

奇怪的问题：我正在开发一个自举响应式网站，并使用Chrome开发者工具设备模拟器来查看外观。不幸的是，我在Chrome Devtools上看到的并不像我在实际手机上看到的那样。

iPhone5 screen shot

由于某种原因，我的背景图像没有正确传播。在该主页的五张幻灯片中的四张上注明了该缺陷。

<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-image :(我正在使用透明背景的.png，所以我需要那里的白色。）？

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

AAAAAaarggh！我刚刚使用带有Chrome浏览器的三星Galaxy S5测试了同一个网站，它看起来与Chrome浏览器模拟器相同。完善！所以...这是否意味着Chrome在其iPhone模拟器的细节中出错了（或者......这是苹果有问题吗？）

注意：是的，我知道涉及移动（视觉视口与布局视口）的问题参考：A Tale of Two Viewports.

我将尝试将所有vh和vw转换为像素，然后重新测试。但我仍然困惑为什么模拟器的差异。再次，这应该是一个错误提交，以及谁... Apple或Chrome伙伴？

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

Second screen image

<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

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

Answer 2

iPhone上的Safari对图像有一定的尺寸限制（JPG高达3200万像素，GIF / PNG 3-5百万像素取决于设备）。

您可以尝试使用不同的较小（分辨率）图像作为背景图像吗？

背景图片 - Chrome Dev Tools移动模拟器与实际设备（iPhone）不匹配

2 个答案: