Most layout bugs are not bugs. They're mismatches between the viewport we designed on and the viewport someone else is using.

Here's the thing that trips people up: a phone can report a 412 CSS-pixel-wide screen while being physically half the size of your laptop , and a 4K monitor at 200% scaling gives you exactly the same usable width as a 1080p one. Resolution and viewport are not the same number, and treating them as one is where "it works on my machine" comes from.

Three numbers that get confused

Number What it really means Where you see it

Physical resolution Actual pixel count of the panel, e.g. 3840×2160 Product specs, OS display settings

CSS viewport width What window.innerWidth reports after scaling and zoom DevTools device mode, media queries

Device pixel ratio Physical pixels per CSS pixel (1, 1.25, 1.5, 2, 3) window.devicePixelRatio

A 27" 1440p monitor at 100% gives you roughly 2560 CSS pixels to play with. A 15" laptop at 1920×1080 and 150% scaling gets 1280.…