Understanding Display Resolutions and DPI

When you buy a 4K monitor, you expect massive amounts of screen real estate. However, upon plugging it in, you might notice that everything just looks sharper, but you don't actually have more space. Why does this happen? The answer lies in the difference between hardware resolution and software scaling.

Physical vs Logical Resolution

Your physical resolution is the actual number of hardware pixels on the panel. A 4K monitor has 3840 x 2160 physical pixels. However, if an operating system renders UI elements at a 1:1 pixel ratio on a 27-inch 4K screen, the text would be incredibly small and unreadable.

To fix this, operating systems use logical resolution (or viewport resolution) combined with display scaling. For instance, macOS might scale the UI by 200%. This means the logical resolution acts like 1920 x 1080 (1080p), but it uses 4 physical pixels to draw every 1 logical pixel. The result is razor-sharp text (often called Retina display) without sacrificing readability.

DPI and Pixel Ratio

The device pixel ratio is a crucial metric for web developers. It tells the browser how many physical pixels make up a CSS pixel. If you are developing a website, you must provide high-resolution images (often 2x or 3x standard size) so they don't appear blurry on high-DPI screens.

You can check your current monitor's logical viewport and pixel ratio using our Diagnostic Display Tool, which provides real-time telemetry on how your browser is interpreting your hardware.