My device (Macbook Pro 2019 16") has a resolution of 3072 x 1920. When entering the realm of CSS, pixel units are "normalized". From my understanding, each CSS pixel is equal to my window.devicePixelRatio in device pixels. In my case, window.devicePixelRatio === 2. If my understanding is correct, this would mean that a CSS grid column with a width of 3072 / 2 = 1536px should take my entire viewport width. Surprisingly this is not the case: the actual viewport with is 1792px.
If I divide my screen width by the viewport width, this gives me a "real" device to css pixel ratio of 3072 / 1792 = 1.7142857142857142. Why is this not returned by window.devicePixelRatio?
To make matters more confusing, when I take a screenshot with Chrome's API, it gives me a screenshot with width 3584px. Weirdly, all these numbers somehow seem to come together: (3584px * 1.7142857142857142) / 2 = 3072px which is my real device width. How does this make sense?
Finally, is there a way to get to 1.7142857142857142 programmatically?
