Is the responsive-simulation in Chrome DevTools always accurate?

Question

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

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