4

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?

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.

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.

  • 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 Feb 25 '17 at 18:12
  • And how canI know what my device pixel radio is? – papakias Feb 26 '17 at 18:53
  • 1
    @papakias google for "device pixel ratio <name of your device>". – David Röthlisberger Feb 27 '17 at 16:50

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.