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