Chrome DevTools not giving accurate mobile view compared to real mobile view

Question

I am trying to make my webpage mobile friendly. So, I am using Chrome DevTools to design a mobile version of my webpage. I have it the way I want it to look in DevTools. I uploaded it to my website & viewed it on a actual mobile phone & objects are not in the same places as they are in DevTools. I used the iPhone 6 mobile design in DevTools and also view it on an actual iPhone 6. They don't match. Anyone else have this problem? I have read articles about this, but don't know how to fix it. Any ideas? Should I use a different emulator?

This is Chrome DevTools version on iPhone 6:

This is how it really looks on an iPhone 6:

Answer 1

DevTools technical writer here. DevTools is just a simulation of mobile devices. It can't truly simulate an iPhone. So it's always a good idea to check how it actually looks on the devices that you care about (like you did). I don't think there's any bug or issue here. It's just an instance where the DevTools simulation doesn't reflect reality 100%.

Answer 2

Mac users can use the Simulator to emulate any Apple mobile device and see exactly how their website will appear on it. You can use it to open Safari and access your localhost. I used it to fix issues on my website, issues that I could not reproduce in DevTools.