Why does my responsive code look different on an iPhone compared to slimming window down?

Question

I am developing a little template in my spare time currently. I am doing the responsive side of things currently. I own an iPhone X and use that to check how responsive my sites are.

Website: https://donnieberry97.github.io/AgencyTemplate/

Repo: https://github.com/donnieberry97/AgencyTemplate/

Screenshots:

As you can see, I am using both the Responsiveness tool on Chrome and iPhone X to compare. I selected iPhone X on the chrome tool and the site looks fine.

However, once I load it onto a real iPhone X. My spacing on my headers seems to be gone and the button is pushing outside the div.

Is there something I'm doing wrong here? I've tried re-sizing my window multiple times but I still can't replicate what my phone shows.

Answer 1

The Chrome emulator uses different rendering and JavaScript engines than iOS Safari, so it's not entirely reliable in showing what your site would look like on an actual device.

To be able to inspect your code on a real iPhone, you have a couple of options.

1. If you have a Mac, download Xcode from the app store. From the Xcode menu bar, select Xcode > Open developer tool > Simulator. And once you're in Simulator, you can view your site on a range of different iPhones. To inspect your code, open Safari. In 'Preferences > advanced', make sure you tick "Show Develop menu in menu bar". Click on the "develop" menu, and you'll see your simulated device in the list. Select it and the web inspector will pop up. You can now inspect all your elements the same way you do with Chrome dev tools.

2. If you don't have a Mac, Browserstack can help you out.