Screen Resolution
See your screen resolution, browser viewport, pixel density and colour depth at a glance - the viewport figures update live as you resize.
Common resolutions compared
| Name | Resolution | Aspect | Megapixels |
|---|
Screen versus viewport
Two measurements matter when you are building or testing a layout. The screen resolution is your whole display, reported by the browser in CSS pixels. The viewport is the slice of that screen your browser actually gives the page, after subtracting toolbars, tabs, the address bar and scrollbars, and after accounting for a window that is not full-screen. Media queries and responsive breakpoints react to the viewport, which is why the viewport figure above is the one that changes when you drag the window edge.
CSS pixels and device pixel ratio
Modern phones and laptops pack far more physical pixels than the numbers you see in CSS. That is the device pixel ratio: on a Retina screen with a ratio of 2, every CSS pixel is drawn with a 2x2 grid of real pixels, so a panel advertised as 2880 pixels wide reports 1440 CSS pixels. Multiply the reported width and height by the pixel ratio to recover the physical resolution - that is the "Physical pixels" figure above. The ratio also shifts when you zoom the page in or out, which is a quick way to see it move.
Common display resolutions
- 1366x768 - still common on budget laptops
- 1920x1080 - Full HD / 1080p, the most widespread desktop size
- 2560x1440 - QHD / 1440p, popular with gamers and designers
- 3840x2160 - 4K UHD, four times the pixels of 1080p
- 390x844 - a typical modern phone in portrait (CSS pixels)
Designing images or video for a specific frame? The aspect ratio calculator keeps proportions correct, and the image resizer scales files to exact pixel sizes right in your browser. To check colour choices look sharp for everyone, the contrast checker tests against accessibility standards.