背景图片-Chrome开发工具移动模拟器与实际设备不匹配(iPhone) [英] Background Image -- Chrome Dev Tools Mobile Emulator Doesn't Match Actual Device (iPhone)

问题描述

奇怪的问题:我正在一个响应引导的网站上，并使用Chrome开发者工具设备仿真器来查看外观.不幸的是，我在Chrome Devtools上看到的内容与实际在手机上所看到的完全不同.

由于某些原因，我的背景图片无法正确传播.该主页的五张幻灯片中的四张记录了该缺陷.

 < div id ="slide-2m" class ="gf_mobile" style ="height:100％; margin:0 auto;溢出:隐藏；背景颜色:白色；背景图片:url(<?php echo get_stylesheet_directory_uri();?>/includes/images/oranges_mobile.png);背景重复:不重复；背景位置:中心底部；背景附件:固定；填充:40px 0;>< div style ="height:100％;溢出:隐藏； 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％;溢出:隐藏； 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的双重用途:白色；和background-image :(我使用的是具有透明背景的.png，所以我需要在其中添加白色)?

一个显而易见的问题是，仿真器为什么不与实际的移动设备准确匹配?这是Chrome开发者工具中的错误吗?

AAAAAaarggh！我刚刚使用装有Chrome浏览器的Samsung Galaxy S5测试了相同的站点，它看起来与Chrome浏览器仿真器相同.完美的！所以...这是否意味着Chrome在其iPhone模拟器的详细信息中出现了错误(或者...苹果在这里吗?)

注意:是的，我知道涉及移动(可视视口与布局视口)的问题.参考:

解决方案

U.答案是不要在手机上使用 background-attachment:fixed; .

ref:如何复制iOS上固定的后台附件和使用ios7修复背景图片

嗯..开发工具模拟器应该在这个主题上为您提供帮助吗?这应该是Google Chrome小组建议的功能吗?

Weird problem: I'm working on a bootstrap responsive site, and using the Chrome Developer Tools Device Emulator to see how things look. Unfortunately, what I see on Chrome Devtools doesn't look at all like what I see on an actual mobile phone.

For some reason, my background images aren't propagating correctly. The defect is noted on four of the five slides on that home page.

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

Hmm.. I'm wondering if its either the use of vh (view port units?) or perhaps the dual use of background-color: white; and background-image: (I'm using a .png with transparent background, so I need the white in there.) ?

So the obvious question is, why doesn't the emulator accurately match the actual mobile device? Is that a bug in the Chrome Developer Tools?

AAAAAaarggh! I just tested the same site with a Samsung Galaxy S5 with Chrome browser, and it looks same as the Chrome Browser Emulator. Perfect! So... does that mean Chrome error'd in the details of its iPhone simulator (or ... is Apple at fault here?)

Note: And yes, I'm aware of the issues involving mobile (visual viewport vs layout viewport) ref: A Tale of Two Viewports.

I'm going to attempt to convert all vh's and vw's over to pixels and then retest. But I'm still baffled why the difference in the emulator. Again, should this be a bug submission, and to whom.. Apple or Chrome folks?

Update: I'm working on converting all VW and VH's to pixels but so far on a screen by screen basis, that is a fail. I'm really thinking this has something to do with CSS and background-size and background-location. Look at the background image on this slide, emulator 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;" >

One more thing I just now noticed: I've set up background-attachment: fixed; and that's how they work on the emulator. On the Samsung, I can see the backgrounds on all the five slides but they DO SCROLL. On the iPhone, I can't see the background on most of the slides. The whole thing is odd.

Oops: Background-fixed, not so hot on mobile...

解决方案

Ugh. The answer is to not use background-attachment: fixed; for mobile.

ref: How to replicate background-attachment fixed on iOS and Fixed background image with ios7

Hmmm.. Should the dev tools emulator help you on that topic? Should that be a suggested feature to Google Chrome team?

这篇关于背景图片-Chrome开发工具移动模拟器与实际设备不匹配(iPhone)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！