What is my screen size in pixels?
Your screen size in pixels is shown by the checker above, read directly from your browser. Two numbers matter and they are often different. The browser reports CSS pixels; the panel has physical pixels. Multiply the CSS figure by the device pixel ratio to get the hardware figure, so a display reporting 1280 x 720 at a ratio of 2 is a 2560 x 1440 panel.
Runs in your browserAlso asked as
- how many pixels is my screen
- screen size in px
- how many pixels wide is my screen
- my display size in pixels
Do it here: What Is My Screen Resolution?
Check your screen resolution, browser viewport, device pixel ratio, colour depth and GPU.
- Screen resolution
- `screen.width` x `screen.height`, in CSS pixels
- Viewport
- `window.innerWidth` x `window.innerHeight`, the drawable area of the tab
- Device pixel ratio
- `window.devicePixelRatio`, physical pixels per CSS pixel
- Physical resolution
- CSS resolution multiplied by the device pixel ratio
Four different numbers, all called "screen size"
Most confusion about pixel counts comes from four separate measurements sharing one name. They are all reported above, and each answers a different question.
| Measurement | What it is | Read from |
|---|---|---|
| Screen resolution | The whole display, in CSS pixels | screen.width x screen.height |
| Available screen | The display minus the taskbar, dock or menu bar | screen.availWidth x screen.availHeight |
| Viewport | The area this page can actually draw in | window.innerWidth x window.innerHeight |
| Physical resolution | The pixels the panel really has | CSS resolution x window.devicePixelRatio |
Why the browser figure is smaller than the box said
A CSS pixel is a unit of apparent size, not a hardware pixel. On a high-density display the operating system packs two or more physical pixels into each CSS pixel so that text stays the same physical size instead of shrinking. The browser reports the CSS figure, because that is the coordinate system a web page is laid out in. The device pixel ratio is the multiplier between the two.
const cssW = screen.width; // e.g. 1280
const cssH = screen.height; // e.g. 720
const dpr = window.devicePixelRatio; // e.g. 2
// The panel's real pixel grid
const physicalW = cssW * dpr; // 2560
const physicalH = cssH * dpr; // 1440Which number you actually need
- Setting CSS breakpoints: the viewport. Media queries match
innerWidth, not the screen. - Exporting an image for a page: the viewport multiplied by the device pixel ratio, so a 2x asset stays sharp.
- Buying or matching a wallpaper: the physical resolution.
- Filing a bug report: all of them, plus the ratio, since a layout bug at 1x often will not reproduce at 2x.
Multiple monitors
screen.width describes the display the browser window is currently on, not the whole desktop and not the largest monitor. Drag this tab onto another screen and reload to read that one. Monitors with different densities also report different ratios, which is why a window dragged between them can change its reported viewport size without being resized.
Related tools
- What aspect ratio is my monitor works the ratio out from these numbers.
- Aspect ratio calculator scales a width and height while keeping the shape.
- Browser info reports the rest of what the browser knows about the device.
- PX to REM converter turns pixel values into relative CSS units.
- Image resizer resizes an asset to an exact pixel target.