Understanding Screen Resolution
What is Resolution?
Screen resolution refers to the number of pixels displayed on your screen, expressed as width × height. Higher resolutions mean more pixels, resulting in sharper images and more screen real estate for work.
What is DPI/DPR?
Device Pixel Ratio (DPR) indicates how many physical pixels are used to display one CSS pixel. A DPR of 2 (Retina) means 4 physical pixels per logical pixel, resulting in sharper text and images.
Common Screen Resolutions
| Name | Resolution | Aspect Ratio | Use Case |
|---|---|---|---|
| HD | 1280 × 720 | 16:9 | Budget laptops |
| Full HD | 1920 × 1080 | 16:9 | Most common |
| 2K / QHD | 2560 × 1440 | 16:9 | Gaming, Design |
| 4K / UHD | 3840 × 2160 | 16:9 | Professional |
| 5K | 5120 × 2880 | 16:9 | Studio displays |
Frequently Asked Questions
Why is my detected resolution different from my monitor's native resolution?
This can happen due to display scaling settings in your OS. For example, Windows often uses 125% or 150% scaling, which reduces the effective resolution. Also, if you're viewing in a browser window that's not maximized, the viewport size will be smaller than your screen resolution.
How accurate is the refresh rate measurement?
The refresh rate is measured using requestAnimationFrame, which reports the actual frame rate your browser is achieving. It may show slightly lower values if your browser is throttled (background tab) or if your GPU is under heavy load. For most accurate results, keep this tab in focus.
What does pixel ratio (DPR) mean for web developers?
For web developers, DPR is crucial for serving appropriate image sizes. On a DPR 2 display, you should serve 2x resolution images to ensure they appear sharp. Using srcset with 1x, 2x, and 3x variants is the best practice for responsive images.