1

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.

enter image description here

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.

enter image description here

node_modules
  • 4,790
  • 6
  • 21
  • 37
Vpp Man
  • 2,384
  • 8
  • 43
  • 74
  • 1
    DevTool allows you to emulate a specific screen size, but still uses a desktop browser version. You can add a custom devise by clicking dimensions, and add a new one with more specific details – Johan Feb 02 '23 at 09:51
  • 1
    You mistaken Hardware Pixels for Software Pixels! – tacoshy Feb 02 '23 at 09:53

2 Answers2

0

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.

str
  • 42,689
  • 17
  • 109
  • 127
tacoshy
  • 10,642
  • 5
  • 17
  • 34
0

Here are the correct settings to emulate a Samsung Tab A8 on Chrome & other browsers:

  • Width: 1280px
  • Height: 800px
  • Device Pixel Ratio: 1.5
Philipp Waller
  • 463
  • 1
  • 7
  • 13