I'm working on a new website and there's some debate regarding what width should be picked as maximum for the main, fixed-sized, grid (it won't be a 100% width layout). (Should it be 1100px? Should it be more?) In terms of width, from that point down, the grid will be fluid until it hits a breakpoint to be defined, then we'll switch to a smaller-screen layout.
I was trying to reason about all this using screen resolution stats (like https://gs.statcounter.com/screen-resolution-stats). However, these are obviously in true pixels. I was a bit surprised to find out that on my 1920×1080 laptop screen, the maximized browser width is "only" 1536 CSS pixels, which means a 1,25 pixel density I wasn't aware of.
On the other hand, these stats show a lot of 360px-width devices, which I suppose to be mobiles, but how could these be real pixels if they're supposed to have a pixel density of 2, 3 ou more?
There's something I can't quite reconcile here. Could you offer some guidance regarding how to reason about CSS-pixel dimensions from true-pixel screen stats when there's is no clear data about pixel density in relation to screen resolution?
In other words, how are those screen resolution stats supposed to be interpreted in web design if the units (screen pixels vs. css pixels) are not the same? Of course, this is not about how to write css but how to make informed decisions regarding the overall layout.