viewport vs screen resolution
screen.width and screen.height describe the entire monitor, but no CSS media query reads those values to decide a breakpoint: the real driver of responsive layout is window.innerWidth, the actual viewport where the page is drawn after subtracting the browser chrome. This page isolates the two numbers so you stop confusing physical resolution with usable area.
Only when the window fills the entire screen does innerWidth approach screen.width, and even then it still subtracts any fixed operating system taskbar.
Docking the DevTools panel to the side shrinks the viewport available to the page by exactly the panel width, triggering smaller breakpoints even without resizing the browser window itself.
Operating system split view is the most common reason a user sees a site mobile layout on a large monitor, because the reported viewport is far smaller than the monitor physical resolution.
Screen resolution (screen.width and screen.height) is the size of the whole display as the browser reports it, in CSS pixels. The viewport (window.innerWidth and innerHeight) is only the area where the page is drawn, so it shrinks with the window, toolbars, sidebars and page zoom. Physical resolution is the real number of pixels on the panel, which this tool estimates as CSS pixels times the devicePixelRatio. On a plain monitor at 100% scaling they match, on phones and scaled laptops they differ a lot.
Because the media query is reacting to the real viewport width (window.innerWidth), not the monitor resolution: if the browser window only occupies half the screen, in a split view or side by side with another app, the viewport can fall below the mobile breakpoint even though the monitor is 4K.
No: window.innerWidth already subtracts the vertical scrollbar width whenever it is visible, so the value reflects the area truly available to the page content, unlike outerWidth, which measures the entire browser window including all of its chrome.
Yes: screen.availWidth subtracts areas reserved by the operating system, such as the Windows taskbar or the macOS dock, while screen.width reports the panel raw resolution; neither one, though, reflects the size of the browser window itself.
Only when the goal is to learn the physical monitor capability, such as choosing the maximum video resolution to offer a user; for layout, spacing and breakpoint decisions, window.innerWidth is always the correct measurement because it reflects the real space available to the content.
… px
Estimate: CSS pixels times DPR. System scaling and page zoom can change it.
Samples frames for 2 s and uses the median.
Press the button to measure.
Measures what the browser draws, not the monitor's limit.
Reading the viewport width...
| Breakpoint | From | Up to |
|---|---|---|
base | 0 px | 639 px |
sm | 640 px | 767 px |
md | 768 px | 1,023 px |
lg | 1,024 px | 1,279 px |
xl | 1,280 px | 1,535 px |
2xl | 1,536 px | and above |
| Breakpoint | From | Up to |
|---|---|---|
xs | 0 px | 575 px |
sm | 576 px | 767 px |
md | 768 px | 991 px |
lg | 992 px | 1,199 px |
xl | 1,200 px | 1,399 px |
xxl | 1,400 px | and above |
Framework defaults (min-width in CSS pixels).
Enter the diagonal to see PPI, size and distance.
Pick or type a diagonal.
Reading your screen...
Rectangles to scale: area shows the pixel count.
| Name | Resolution | Megapixels | Ratio | vs 1080p |
|---|---|---|---|---|
| HD (720p) | 1,280 × 720 | 0.92 | 16:9 | 0.44× |
| WXGA (HD 768p) | 1,366 × 768 | 1.05 | 16:9 | 0.51× |
| HD+ (900p) | 1,600 × 900 | 1.44 | 16:9 | 0.69× |
| Full HD (1080p) | 1,920 × 1,080 | 2.07 | 16:9 | 1× |
| WUXGA | 1,920 × 1,200 | 2.3 | 16:10 | 1.11× |
| QHD (1440p) | 2,560 × 1,440 | 3.69 | 16:9 | 1.78× |
| UltraWide QHD (UWQHD) | 3,440 × 1,440 | 4.95 | 21:9 | 2.39× |
| 4K UHD (2160p) | 3,840 × 2,160 | 8.29 | 16:9 | 4× |
| 5K | 5,120 × 2,880 | 14.75 | 16:9 | 7.11× |
| 8K UHD (4320p) | 7,680 × 4,320 | 33.18 | 16:9 | 16× |
Read only when you click.
Nothing is sent. The browser rounds memory.
For bug reports or support. JSON has every field.
Everything is read locally. Nothing is sent.