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?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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