Screen resolution
The size your CSS actually sees. Viewport, window and screen dimensions, the breakpoint you are currently in — Tailwind, Bootstrap or MUI — pixel density and aspect ratio. All of it updates the moment you drag the window edge, and you can ask about a width you are not sitting at.
Your viewport, right now
- Breakpoint
- —
- Aspect ratio
- —
- Pixel ratio
- —
- Orientation
- —
Breakpoints
- base0
- sm≥640
- md≥768
- lg≥1024
- xl≥1280
- 2xl≥1536
Every measurement
- Viewportwhat media queries measure
- —
- Browser windowincluding the browser's own chrome
- —
- Screen (CSS px)the whole display
- —
- Screen (device px)CSS pixels multiplied by the pixel ratio
- —
- Available areathe display minus the dock or taskbar
- —
- Screen aspect ratio
- —
- Total pixels
- —
- Colour depth
- —
- Fullscreen
- —
Common devices
Pick a device to answer for its viewport instead of yours.
| Device | Viewport | DPR |
|---|---|---|
| 375 × 667 | 2× | |
| 393 × 852 | 3× | |
| 430 × 932 | 3× | |
| 360 × 780 | 3× | |
| 412 × 915 | 2.625× | |
| 744 × 1133 | 2× | |
| 834 × 1194 | 2× | |
| 1024 × 1366 | 2× | |
| 1280 × 800 | 2× | |
| 1512 × 982 | 2× | |
| 1366 × 768 | 1× | |
| 1920 × 1080 | 1× | |
| 2560 × 1440 | 1× | |
| 3840 × 2160 | 1× |
CSS for this size
Which size property to use, and when
Four properties report four different rectangles, and using the wrong one is why a layout can look right in the browser and wrong in a media query.
| Property | What it measures | Use it for |
|---|---|---|
| screen.width / height | The whole display, ignoring the browser entirely. | Analytics and rough device classification. Never for layout. |
| screen.availWidth / availHeight | The display minus space the OS reserves — dock, taskbar, menu bar. | Working out how large a window can actually be. |
| innerWidth / innerHeight | The area the page is drawn in, scrollbar included. | Everything to do with layout. This is what CSS media queries read. |
| outerWidth / outerHeight | The whole browser window, including tabs, address bar and borders. | Positioning a window you opened yourself. Almost nothing else. |
| devicePixelRatio | How many device pixels paint one CSS pixel. | Choosing image resolution and drawing sharply on a canvas. |
Frequently asked questions
Why do the screen and viewport sizes differ?
The screen is your whole monitor. The viewport is the rectangle the page is drawn into, with the browser's tabs, address bar, any sidebar and the scrollbar taken off. CSS media queries measure the viewport, so that is the number to design against — and it is the one that changes when you drag the window edge while the screen size stays put.
My phone is advertised as 1290×2796. Why does this say 430×932?
Both are true, in different units. The advertised number counts physical device pixels; CSS counts CSS pixels, and on that phone three device pixels paint one CSS pixel — the device pixel ratio is 3. 1290 ÷ 3 = 430. Media queries, font sizes and every length in your stylesheet work in CSS pixels, which is why the device table on this page lists those.
Why is more than one breakpoint highlighted?
Because Tailwind's breakpoints are min-width queries and min-width queries stack. At 1400px wide, sm:, md:, lg: and xl: are all matching at once — the reason lg:flex and xl:grid do not fight is that the later one wins on source order, not because the earlier one stopped applying. The emphasised cell is the deciding prefix; the rest are marked as passed.
What does the pixel ratio change in practice?
Two things. Images: at a ratio of 2 a 400px-wide slot needs an 800px image to look sharp, which is what srcset and the 2x descriptor are for. And canvas: set the element's width attribute to the CSS width times the ratio, then scale the context by the same factor, or everything you draw comes out soft.
Why does my aspect ratio not look like a round number?
Because most screens are not exactly 16:9. A 1512×982 MacBook display reduces to 756:491, which is arithmetically correct and tells you nothing — so this page matches the measured ratio against the standards first, within 1.5%, and only falls back to a fraction or a decimal when no standard is close enough.