3

I found a defect using an LG G4 android device. It has a 5 inch screen and the manufacturer writes that it's resolution is 2560 x 1440 (Quad HD) PPI 538. I would like to report the defect stating the device and resolution but I would also like the developers to be able to replicate it using 'responsive design mode' or 'mobile view' from a browser on a PC. Setting the mobile view of a browser to 2560 x 1440 though, makes the screen really large.

How can I know the right resolution in order to replicate the screen size of each mobile device in mobile view?

Improve this question

2 Answers 2

Reset to default
3

TL;DR: The best way to get the viewport size is to surf to a viewport-size-reporter on the actual device and use those values.

With mobile website and responsive design the viewport is not the same as the resolution of the device, because for example the address bar of the browser also takes up some space.

Due to scaling the viewport resolution could be different due to retina display configurations. The resolution is very high, but the viewport is very small.

For example my iPhone SE has a viewport of 320x460, its actual resolution is 640 x 1136. The reported logical resolution for the device is 320 x 568, but this is without the browser bars. This is an issue with the developer tools as the Chrome mobile view testing tools use a default resolution of 320x568 for a small iPhone, making some sites not working with its actual 320x460 viewport size. Certainly if height is also part of your design.

Improve this answer
1
  • 1
    the link in the TL;DR for the viewport-size-reporter is not working as of 5/8/20.You can use whatismyviewport.com
    – RealHandy
    Commented May 8, 2020 at 17:57
3

Your LG G4 phone has a "Retina" or "High-DPI" display, so it has many more pixels per inch than a desktop monitor.

In Chrome's "Mobile View" you can specify the "Device pixel ratio" as well as the width & height resolution:

Chrome custom device dialog

According to google the LG G4's pixel ratio is 4.

Improve this answer
3
  • 1
    The Chrome mobile view does not take the browser address bar into account. I have had some issues due to this in the past, certainly when the height is also important for the design.
    – Niels van Reijmersdal
    Commented Feb 25, 2017 at 18:12
  • And how canI know what my device pixel radio is?
    – papakias
    Commented Feb 26, 2017 at 18:53
  • 1
    @papakias google for "device pixel ratio <name of your device>".
    – David Röthlisberger
    Commented Feb 27, 2017 at 16:50

Your Answer

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

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