1

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.

  1. Why does it happen? Based on what information (headers, etc.) Web application decides to render layout differently?

  2. Which approach is more realistic to evaluate layout for different resolutions on both mobile devices and standard laptop/desktop monitors?

Improve this question
3
  • You should also try settting different resolutions vis Control Panel/ Display when it comes to desktop views only.
    – drabsv
    Jan 26, 2017 at 12:39
  • @drabsv that would be 3rd approach. Why would it be better than the first two?
    – dzieciou
    Jan 26, 2017 at 12:47
  • It is useful for checking which type of rendering shows the same with this method.
    – drabsv
    Jan 26, 2017 at 12:49

1 Answer 1

Reset to default
2

If you are interested in testing for different screen sizes and features, I recommend to test with Device mode of Chrome DevTools which I think you are commenting in the question. You can set up your own devices or simply play with the Responsive device.

There is nothing as close as testing in the real device. For example, iOS Safari has a bug with viewport units, that won't replicated with DevTools. To test iOS with higher fidelity I use the Xcode Simulator which reproduces the bug.

Other resources:

Material design - Resizer

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.