What's my screen resolution?
Checking…
| Screen resolution (device pixels) | – |
|---|---|
| Screen size in CSS pixels | – |
| Device pixel ratio | – |
| Browser window (viewport) | – |
| Screen aspect ratio | – |
| Color depth | – |
| Orientation | – |
How to check your screen resolution
The figure at the top is your answer. It multiplies the screen size your browser reports (screen.width and height, in CSS pixels) by the device pixel ratio. Resize the window and the viewport row updates. Browser zoom changes the device pixel ratio, so set the page zoom to 100% before you read the figure.
You can confirm it in your system's display settings, which show the resolution the screen is set to. If you use a scaled setting, the browser's CSS pixel size will be smaller than the device pixel count.
CSS pixels and device pixels
Browsers lay pages out in CSS pixels, a unit defined so that 96 of them make an inch (W3C). High-density screens draw each CSS pixel with several device pixels: with a pixel ratio of 2, a window 1440 CSS pixels wide uses 2880 device pixels. That is why a high-density screen reports a CSS width smaller than its panel resolution.
Common screen resolutions
| Name | Pixels | Ratio |
|---|---|---|
| HD / 720p | 1280 × 720 | 16:9 |
| Full HD / 1080p | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / 1440p | 2560 × 1440 | 16:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Full HD comes from ITU-R BT.709 and 4K UHD from BT.2020. Samsung lists 720p as 1280 × 720 HDTV, ASUS sells the PA248QV as a 16:10 WUXGA (1920 × 1200) monitor, and ViewSonic's VX2758A-2K-PRO-2 spec sheet gives 2560 × 1440 as QHD. Learn more in our guides to 1080p, 1440p, 2K and 4K, or work out a shape with the aspect ratio calculator.
Frequently asked questions
- How do I check my screen resolution?
- This page reads it from your browser: the large number at the top is your screen in device pixels. You can also check it in your system display settings, which list the resolution your screen is set to.
- Why is the number different from my monitor box?
- Operating systems scale the desktop on high-density screens. The browser reports CSS pixels, and multiplying by the device pixel ratio gives device pixels. If your display is set to a scaled mode, both numbers can differ from the panel's native resolution.
- What is device pixel ratio?
- It is how many physical pixels the screen uses to draw one CSS pixel. A ratio of 2 means each CSS pixel is drawn with a 2 × 2 block of device pixels, which is why text looks sharp on high-density screens.
- Is my browser window the same as my screen resolution?
- No. The viewport is only the area inside the browser window that shows the page, so it is usually smaller than the screen and changes when you resize the window. Websites lay out against the viewport.
Sources
- Window: devicePixelRatio property, MDN Web Docs
- Screen: width property, MDN Web Docs
- CSSOM View Module, W3C