Screen sizes in DevTools do not match actual device sizes

Question

In Chrome's DevTools, when I select a mobile device to display a web page, I notice that the screen size in DevTools does not match the device's actual screen resolution. For example, if I select a Pixel 2 XL, the width shown in DevTools is 412. But the device is actually 1440 in width. Is there a reason for this?

Answer 1

That's because the Pixel 2 XL has a pixel density of 3.5 so while the device resolution of the device is 1440 x 2880 px it's CSS resolution is 412 x 823 px ((1440 / 3.5) x (2880 / 3.5))

A pixel does not have an inherent size. It obtains one when it’s displayed or printed.

You can read more about the difference between device and CSS resolutions here.

You can find device and CSS resolutions for many devices here.