DevicedialScreen resolution
Screen resolution
Physical resolution
โpx
A CSS pixel is not a screen pixel. At a device pixel ratio of 2 the browser reports half of what the panel really has, which is why both numbers are here side by side.
- CSS pixelsโ
- Pixel ratioโ
- Browser windowโ
- Colour depthโ
Reset page zoom with Ctrl and 0 before reading the physical figure โ zoom moves the pixel ratio with it.
One gear check a month
MonthlyOne thing a month worth measuring before it fails properly โ a mic that reset itself, a stick that drifts, a switch sending two clicks. Two sentences and the test.
Try also
What is my screen resolution?
The Devicedial screen resolution test reports two numbers, because your display has two. The first is the CSS resolution the browser works in. The second is the device pixel ratio, and multiplying them gives the physical pixel count printed on the box.
A 2560 by 1440 monitor running Windows at 150 percent scaling reports 1707 by 960 CSS pixels with a ratio of 1.5. Neither number is wrong: 1707 by 960 is the space a web page has to lay itself out in, and 2560 by 1440 is what the panel lights up. Phones are the extreme case, where a ratio of 3 turns 393 by 852 into 1179 by 2556.
Page zoom moves the ratio too, so press Ctrl and 0 to reset it before reading the physical figure. Fractional scaling rounds the CSS numbers, so the product can land a pixel out.
The same panel reports different numbers depending on how the system is scaling it. These are the combinations most people are actually sitting in front of.
| Display | Scaling | Reported (CSS px) | Ratio | Physical px |
|---|---|---|---|---|
| 1080p monitor | 100% | 1920 ร 1080 | 1 | 1920 ร 1080 |
| 1440p monitor | 100% | 2560 ร 1440 | 1 | 2560 ร 1440 |
| 1440p monitor | 150% | 1707 ร 960 | 1.5 | 2560 ร 1440 |
| 4K monitor | 150% | 2560 ร 1440 | 1.5 | 3840 ร 2160 |
| 4K monitor | 200% | 1920 ร 1080 | 2 | 3840 ร 2160 |
| MacBook Pro 14 | default | 1512 ร 982 | 2 | 3024 ร 1964 |
| iPhone, 6.1 inch | โ | 393 ร 852 | 3 | 1179 ร 2556 |
| iPad, 10.9 inch | โ | 820 ร 1180 | 2 | 1640 ร 2360 |
Two rows in that table report 2560 ร 1440 and mean completely different hardware: one is a 1440p panel at 100 percent, the other a 4K panel at 150 percent with four times as many real pixels behind it. That is the whole reason the ratio is worth reading.
Now that you know the pixel count, the dead pixel test checks whether all of them work, and the refresh rate test measures how often they are redrawn. The camera test reports the same kind of figure for a webcam feed.
Frequently asked questions
Why does the browser report less than my monitor's resolution?
Because it reports CSS pixels and your operating system is scaling. At 150 percent scaling a 2560 by 1440 monitor hands the browser 1707 by 960 to lay pages out in, with a device pixel ratio of 1.5 to record how much real estate each of those pixels covers. Multiply the two back together and you are at 2560 by 1440 again.
Does browser zoom change the numbers?
It changes the ratio. Zooming a page in Chrome or Firefox makes each CSS pixel physically larger, which is the same thing as raising the device pixel ratio, so any physical figure derived from it drifts with the zoom level. Press Ctrl and 0, or Command and 0 on a Mac, to return to 100 percent before you trust the reading.
What is the difference between screen size and window size?
Three numbers, nested inside each other. The screen is the whole display; the available area subtracts the taskbar or dock; the viewport is the part of the browser a page can draw in, smaller again by the address bar and any open sidebar. Pages are laid out against the viewport, which is why a responsive layout can switch at a width your monitor never has.
Why does my phone report 393 by 852?
That is the CSS viewport, and it is the figure that matters for web design. The panel underneath is 1179 by 2556 at a device pixel ratio of 3, so every CSS pixel is a 3 by 3 block of real ones. That is why text on a phone looks sharper than on most desktop monitors despite the small number on screen.
Is resolution the same as screen size?
No. Resolution counts pixels; size is measured in inches across the diagonal. Pixel density links them: the same 1920 by 1080 grid is comfortably sharp on a 24 inch monitor and visibly coarse on a 40 inch one, because the same pixels are spread further apart. Two displays with identical resolutions can look nothing alike.
Why is the physical figure a pixel out?
Fractional scaling rounds. At 150 percent a 2560 pixel wide panel divides to 1706.67 CSS pixels, which the browser reports as a whole number, so multiplying it back by 1.5 misses the true width by half a pixel. It is a rounding artifact of the reported value, not a measurement of your panel.
How the test works
The reported resolution comes from screen.width and screen.height, which are given in CSS
pixels โ the coordinate space a page is laid out in, after operating system scaling has been
applied. The scale factor is window.devicePixelRatio, the number of device pixels per CSS pixel in
each direction. Physical resolution is the product: CSS pixels multiplied by the ratio, which this
page shows next to the CSS figure rather than in place of it, because both are answers to real
questions.
Two caveats are built into the display. Page zoom multiplies the device pixel ratio in most browsers,
so a zoomed page produces a physical figure that is too large; and at fractional scaling the CSS
values are rounded to whole numbers, so the product can miss the panel’s true count by a pixel. The
viewport figures come from innerWidth and innerHeight and describe the window, not the screen.
Nothing is transmitted โ every value is read in your browser.
Sources:
Where the second number came from
A CSS pixel used to be a real pixel. It stopped being one when displays passed roughly 200 pixels per inch: at that density a button sized in real pixels would have been half the size of your fingertip, so browsers redefined the CSS pixel as a unit of apparent size and put a ratio between it and the hardware.
That ratio is what device pixel ratio reports. A value of 1 means one CSS pixel is one device pixel. A value of 2 means every CSS pixel is drawn as a 2 by 2 block, which is why images have to be supplied at twice the size to look sharp on such a screen.
Which number you want depends on the question. Buying a monitor or checking a video resolution: physical pixels. Building a page, choosing a wallpaper for a browser window or debugging a layout: CSS pixels. This page shows both so you never have to guess which one you were given.