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

Stoical

Yeah, doesn't always render the expected results. Mobile Optimisation - Dev Tools can be wrong – Attaboy

@Attaboy Do you have any suggestions for alternatives methods of testing? – Stoical

I use a combination of Chrome Dev Tools and a manual window resolution changer extension Res Changer and between the two, it seems to work alright – Attaboy

@Attaboy Thanks for the suggestion, unfortunately I've already tried using that exact extension the other night. It isn't just DevTools, it's the same result when even resizing the window. Do you think this could be a deeper problem? – Stoical

Yeah, there could always be a deeper problem. For instance, which browser/phone are you using? There's a chance the browser you're viewing the content on doesn't support some media query / css feature you've implemented. Like IE11 barely supports anything unless it's prefixed, despite it working fine in Chrome/FF/Safari – Attaboy

the link I included in my answer mentions something about a bug in chrome. I honestly dont like using chrome anyway because of high the cpu usage is. I use FF dev for everything – Depilate

@Attaboy I'm using two phones to test, an iPhone 7 and iPhone X. Using the latest version of Safari (I think 5.17). There's two things not working with the bg img, first the position is wrong, second it isn't a parallax. Have any guesses why they aren't? Thanks :) – Stoical

I think that perhaps it would be a good idea to post your code, there might be something such that I suggested (whether it be a combination of CSS features or simply a CSS feature that isn't supported causing your issue)! – Attaboy

For instance, are you using background-attachment: fixed anywhere in your code? – Attaboy

Actually. To answer my own second question - parallax is disabled on most mobile devices by default. Sorry I didn't know this and just checked. Still can't figure why position changes though – Stoical

.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; } This is the class for my background image. – Stoical

Cool, so according to this forum, background-attachment:fixed doesn't work for iOS, which may explain why your background image isn't in the position you expected. – Attaboy

This may be a solution for you? – Attaboy

@Attaboy Yea my bad, I looked it up a few minutes ago and realised the same thing. Any ideas for why the image changes position though? That shouldn't be affected and should be over run by background-position, right? – Stoical

Honestly from hearing about how iOS handles parallax, I'm just going to disable it for mobile. It's just the position change I'm a bit concerned about. Thanks – Stoical

Maybe give this a go, instead of background-position:center: CSS background-position not working in Mobile Safari (iPhone/iPad) – Attaboy

Testing it now, it seems to be the same working result when I test via DevTools or adjust the window But still not central on mobile. I guess I'm going to have to play around with it and change the resolution and such. Thanks for all the help. I'm brand new to stackoverflow and only just made an account. How do I mark your comment as the answer and upvote them? I can do it on answers but I don't know how on comments. – Stoical

Hey @Jack HK you can't at this stage mark comments as answers, so I can either post my information in a question for you to mark as accepted or just take the virtual pat on the back :P – Attaboy

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!

Attaboy

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

Depilate

Thank you for your input. The problem is, anything on DevTools seems to be inaccurate - including using the screen ruler. The elements react completely different on a real phone. Do you have any suggestions for what else I could try? Thanks – Stoical

Ill comment this since it is completely biased (lol :) ) but I prefer firefox-dev-edition for this reason. other than that, android x86 is what I use to test sites for android. I just change the resolution in openbox settings – Depilate

Yea you have a good point, I should really use multiple different browser tools in order to be 100% sure about it's responsiveness. Thanks, I'm going to consider firefox. – Stoical

No problem, good luck, let us know what you find out and if it works for you – Depilate

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

Predisposition

Thanks for the suggestion! Going to try out crossbrowsertesting.com asap. – Stoical

Yeah the tool is awesome! I think you can try it for free and use it for 1 project or so... have fun! – Predisposition

Answer 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

Centri

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

Tapley