Is the responsive-simulation in Chrome DevTools always accurate?

问题

So I'm building a site and want it to be responsive and mobile compatible. I've been using Chrome DevTools to view the site by different models of devices and it seems to be fine. Anyway, went to test it using localtunnel on my phone and the background image is in a different position than the view on DevTools.

Is DevTools always 100% accurate? Or is this somehow relevant to localtunnel, or something entirely different?

Tried looking online, couldn't find anything about DevTools being inaccurate.

Thanks in advance, Jack

回答1:

So there are a couple of things to consider with this issue.

Chrome Dev Tools are not always accurate

Firstly, Chrome Dev Tools are not 100% accurate. In fact, I use the extension Resolution Test in conjunction with Chrome Dev Tools to test varying screen sizes/resolutions.

You can read more in Chrome Dev Tool innacuracy issues here: Why Chrome DevTools Is Inaccurate for Mobile Testing

Different Support on Browsers and Devices

Similarly, varying browsers have different levels of support for CSS elements / functions. For instance, E11 barely supports complex CSS functionality unless it's prefixed, despite it working fine in Chrome/Firefox/Safari.

Check the compatibility of various CSS features you wish to implement on a variety of browsers using this tool: Can I use

Parralax isn't supported or doesn't work correctly on most mobile devices

You can read more about this issue here: Parallax scrolling not working on mobile css

background-attachment:fixed may not render correctly or be supported on mobile

More information on this issue can be found by reading this forum: Safari (ipad and iphone) renders background images incorrectly

But essentially, from your supplied CSS I can see you're using this css attribute.

.front-banner { 
    background-image: url("../img/frontbanner2.png"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
    height: 100vh; 
    width: 100%; 
    position: relative; 
    text-align: center; 
    overflow: hidden; 
}

Have a read of this exact issue as already addressed in Stack Overlow: How to replicate background-attachment fixed on iOS

background-position:center also may not render correctly or be supported on mobile

You could attempt to substitute background-position:center with the following:

background-position-x: 50%;
background-position-y: 0%;
background-position: center top;

As per this existing answer: CSS background-position not working in Mobile Safari (iPhone/iPad)

Thanks, hopefully this helps someone in the future!

回答2:

You could always use the screen ruler (see S/O post here) and resize the window to the aspect ratio your checking. Hope it helps!

Edit: Another option

If you have the space for it, you could run android x86 (~3-4gb) in an emulator and adjust the emulators screen resolution (this one of the many things I need android x86 for)

回答3:

I can only say from my own experience that I find the Chrome Tools more accurate than the tools in Firefox. But for some of my clients, I still prefer crossbrowsertesting.com. There I can test with hundreds of real devices. But it is not free. My conclusion is: it is not 100% accurate.

回答4:

I ran into a similar problem where if I specified the chrome emulator so simulate a device with 375px it would render an html page with width of 900px for example. Turns out that I had forgot to add this header in the html file:

<meta name="viewport" content="width=device-width, initial-scale=1">

For people landing here this might help

回答5:

I dont know if i have similar problem, but when im using for mobile res then i switch it to desktop then i switch it back again to mobile res some of the css codes doesnt seems to render properly.. in other case, with the same css codes in my previous projects seems to works fine...

来源：https://stackoverflow.com/questions/59022312/is-the-responsive-simulation-in-chrome-devtools-always-accurate