Screen Resolution Detector
Note: Resize the window until your layout gives way and read the viewport figure — that width is the breakpoint you actually need. Choosing one because a particular phone has that many pixels is how breakpoints end up in the wrong places.
Screen resolution is the whole display, including the taskbar and any part of it another window is covering. Available screen area subtracts the operating system's own furniture. Window outer size is your browser including its chrome. Viewport is the area your page actually gets, and it is the only one your CSS ever sees — media queries, vh units and percentage widths are all measured against it. When a layout breaks at a size you cannot reproduce, the viewport is nearly always the number to compare, not the screen.
Device pixel ratio is the other one worth understanding. On a high-density display, one CSS pixel is drawn using two or three physical pixels, so a phone reporting a 390-pixel-wide viewport may have 1170 real pixels across. That is why an image that looks sharp on a desktop looks soft on a phone: it was sized for CSS pixels. It is also why srcset exists — the browser knows the ratio and picks accordingly, which is not something you can do from CSS alone.
The values update live as you resize, which makes this useful for finding the exact width at which something breaks. The number where the layout gives way is the breakpoint you needed, and reading it off directly beats guessing at 768.
Everything here is read from your own browser and displayed. Nothing is recorded or transmitted.
Frequently Asked Questions
Why is my viewport smaller than my screen resolution?
Because the viewport is only the part of the window your page gets. The screen figure includes the taskbar, the browser's own tabs and address bar, any scrollbar, and the space the window is not occupying. Your CSS only ever sees the viewport.
What does a device pixel ratio of 2 or 3 mean?
That each CSS pixel is drawn with that many physical pixels along each axis. A phone reporting 390 CSS pixels wide at a ratio of 3 has 1170 real ones. Images need to be supplied at the higher size — through srcset — or they look soft, while layout still uses the CSS figure.
Should I design for the most common screen resolution?
No. Design for viewport ranges, because nobody browses at full screen resolution — windows are resized, sidebars are open, and phones have browser chrome. Pick breakpoints where your own content stops working rather than at the dimensions of any particular device.
Why do the numbers change when I zoom?
Browser zoom works by changing how many physical pixels make up a CSS pixel, so the viewport measured in CSS pixels shrinks as you zoom in and the reported pixel ratio rises. This is exactly what lets a zoomed page trigger your mobile breakpoints on a desktop — which is intended behaviour and worth testing.
Is any of this sent anywhere?
No. Every value is read from your browser and rendered on the page. Nothing is logged, stored or transmitted — you can confirm it with the network tab open.
