How to simulate screen resolution realistically when testing responsive Web UI?
I have tried to test our Web page in different resolutions with two different approaches:
- changing resolution on Web browser with Resolution Test extension for Chrome
- simulating mobile devices with Device Mode in Chrome.
The page is rendered differently, depending on my approach. For instance, in device mode a page is zoomed out, e.g., font size seems to be adapted to the device resolution.
Why does it happen? Based on what information (headers, etc.) Web application decides to render layout differently?
Which approach is more realistic to evaluate layout for different resolutions on both mobile devices and standard laptop/desktop monitors?