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

user_9099842 0
Viewed 12265

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 Chrome DevTools version on iPhone6

This is how it really looks on an iPhone 6:

Real iPhone layout

google-chrome-devtools
3 Answers

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

user_16698600

Mac users can use Xcode's Simulator (that's the actual name of 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' device simulator.

enter image description here

user_10964700

Clear the cache for on your browser to ensure that your phone is accessing the most recent updates to your code.

user_153528620
Related