Samsung Tab A8 - CSS Media Query - Chrome Dev Tools

I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200.

When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values, my website looks perfect on my Desktop PC(22 inch screen). But when tested on Samsung Tab A8 device, it breaks.

And Samsung Tab A8 is not in the list of simulators in Google Dev Tools. So am confused regarding the width and height that should be used in media queries. What should be the value that I should use for testing in Google Chrome in my desktop PC.

The issue is caused by the difference between Hardware Pixels (physical pixels) and Software Pixels (CSS pixels).

They are not the same!

High-resolution mobile devices have a high PPI (pixel density) to ensure sharp and clear edges. However, it would be hard to read text on such small displays with such high resolution. As such you have a "technology" implemented called DPR (Device Pixel Ratio). For most high-resolution devices it is 2. That means, that for every CSS pixel you have 2 physical pixels. In other words, your tablet has only a resolution of 960x600px CSS-wise.

An easy workaround would be the usage of:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

That ensures that the hardware pixels are the same as the software pixels. Note, that you harm User Experience and possibly make it harder to read the text for users.