Screen Resolution Detector

Three different sizes, all correct

Screen resolution is the display's full size. Window outer size includes browser chrome. Viewport is the area a page renders into, which is what CSS media queries respond to. A 1920-wide monitor commonly gives a viewport around 1903 after the scrollbar, and far less when developer tools are docked — which is why a layout can look wrong while debugging and fine when closed.

Device pixel ratio separates CSS pixels from hardware pixels

A CSS pixel is a reference unit, not a physical one. A device pixel ratio of 2 means each CSS pixel is drawn with four hardware pixels. A phone reporting a 390-pixel viewport may have a 1170-pixel physical screen at ratio 3. This is why images need to be supplied at two or three times their CSS dimensions to look sharp, and why 1x assets appear soft on modern displays.

Mobile viewports depend on the meta tag

Without viewport meta, mobile browsers render at a virtual width around 980 pixels and scale down, so a responsive layout never triggers its breakpoints. Setting width=device-width, initial-scale=1 is what makes the viewport reflect the actual device.

Zoom changes the numbers

Browser zoom alters the reported viewport in CSS pixels and the effective device pixel ratio, so a user at 125 percent zoom sees fewer CSS pixels and may cross a breakpoint. Designing to breakpoints that assume 100 percent zoom ignores a substantial share of real users.

Resolution is a weak proxy for anything

Screen size does not indicate device type, input method or window size — many desktop users browse in a window far narrower than their display. Feature detection and viewport-based media queries describe the actual rendering context; resolution alone does not.