Checking the responsive design of the page, on different devices

Question

css

Hello!

Recently got to grips with responsive design, practiced on a simple website, made media queries for old/new iPhones and iPads. I checked the layout through the emulators of these devices in Mac OS X, and on a physical iPad.
Everything looked right there, but I decided to check it out on sites that show your layout on various devices (responsinator.com and the like). To my surprise, I saw a completely different picture on these sites than on iPhone / iPad emulators.

Since I don't have an iPhone, who can I trust?
Emulators and one physical iPad, or what do responsive design test sites show?

Answer 1

I may be wrong, but:
if you have through media queries, then everything relies on the user's permission? Change the size of the browser - and see how it will look on a particular device.
Also, chrome in the profiler in the settings in Overrides has Device Metrics and User Agent. Play around with this data, what your layout depends on - and that's it.
Also there are useful things like geolocation, device tilt angle, emulation of touch events and media queries like print

Answer 2

It is better to believe the emulator, this site still renders in the browser engine through which you entered

Answer 3

People will open the site in the iPad, not in the emulator, so it's better to check for cross-browser compatibility in the browsers themselves, in which it will open.
You don’t open the Fox emulator through chrome, but download and open it through it, just like with other browsers and devices.