5

According to Display Setting in Windows, my laptop's screen resolution is 1920 x 1080. When I open a browser, and check the width of the browser using Developer Tools it shows me 1536 px. Why are they different? Is it the difference between hardware pixels and software pixels (CSS pixels) mentioned in this article:

When Apple pioneered this with their Retina display, they split the concept of pixels into hardware pixels and software pixels. A hardware pixel is an individual dot of light in the display. A software pixel, also called a CSS pixel in the web world, is a unit of measurement.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • I also experienced this, and the problem was I was zooming in. Can you check if your zoom is 100% ? – madjaoue Jul 23 '18 at 09:52
  • @madjaoue, thanks for the suggestion, but no, the zoom is 100% – Max Koretskyi Jul 23 '18 at 09:53
  • In this case, please check that `window.devicePixelRatio` is equal to `1`. This should give your the ratio used by Retina display. In my Samsung phone it's 4 for example. Then `window.screen` should give you the actual dimensions of your screen as seen by the browser. – madjaoue Jul 23 '18 at 09:58
  • @madjaoue, thanks a lot! `window.screen.availWidth` is `1536` and `window.devicePixelRatio` is `1.25`, so to calculate the actual width I multiply `1536 x 1.25` and get the `1920` that matches what the `display settings` report. So it is indeed the difference between hardware pixels and software pixels. Can you put it as answer? – Max Koretskyi Jul 23 '18 at 10:02
  • If your zoom is 100%, then yes, this is due to hardware pixels and software pixels. Glad that it solves your problem. I'll put it as an answer then. – madjaoue Jul 23 '18 at 10:04
  • @madjaoue, and I just tried to zoom to `150%`, the `window.devicePixelRatio` has changed to `1.875`, which is `window.devicePixelRatio at 100%` multiplied by `150%`. So to conclude zooming changes the `devicePixelRatio` – Max Koretskyi Jul 23 '18 at 10:06
  • I added an answer ! I can edit it if I missed an important info – madjaoue Jul 23 '18 at 10:25

1 Answers1

5

First check that your zoom is 100%.

Device Pixel Ratio

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution. what exactly is device pixel ratio?

you can get this ratio using : window.devicePixelRatio.

If this ratio is greater than 1, then your available screen size will be less than the logical one. This means that you can have a logical resolution of 1920 x 1080 while your hardware resolution is 1536 x 864

Example

First let us examine the available screen size using window.screen

Now, suppose that :

  1. window.devicePixelRatio == 1.25
  2. window.screen.availWidth == 1536

The logical width would be:

window.devicePixelRatio * window.screen.availWidth == 1920

madjaoue
  • 5,104
  • 2
  • 19
  • 31
  • yeah, thanks, I also asked another question, take a look https://stackoverflow.com/questions/51476628/why-is-the-width-of-a-website-is-the-same-even-when-i-change-the-viewport-in-chr – Max Koretskyi Jul 23 '18 at 10:28