What is my screen resolution

The number a browser reports is not the number of pixels in the panel, and on a high-density screen the gap is large. screen.width gives CSS pixels, a unit of about 1/96 of an inch that exists so a page is a readable size on any display. The device pixel ratio says how many physical pixels sit behind each CSS pixel — 2 on most Apple Retina screens, often 1.25, 1.5 or 1.75 on Windows laptops with display scaling. Multiply the two and you get what the panel actually has.

So a MacBook reporting 1512×982 has a 3024×1964 panel, and a Windows laptop set to 150% scaling reports 1280×720 on a 1920×1080 screen. Neither is wrong; both are the browser telling you the size in the unit that matters for layout.

The viewport is smaller again — it excludes browser chrome, and it is the number your CSS media queries actually respond to. Designing against screen resolution rather than viewport width is a common mistake, and it is why a layout can break on a screen that is nominally wide enough.

One consequence worth knowing: an image needs to be devicePixelRatio times its CSS size to look sharp, which is why a 300px-wide logo should be exported at 600px for a ratio-2 display. That is the whole reason srcset exists.