A screen resolution checker is a browser-based tool that reads the display dimensions and pixel ratio the current browser is willing to expose, then labels each number with the source it came from. The Screen Resolution Checker shows seven distinct values at once: CSS screen width and height, available screen area, viewport size, outer browser window size, device pixel ratio, and the resulting estimated device-pixel dimensions, plus a portrait, landscape, or square orientation label. All of these numbers come from standard window and screen objects, which is why a tab can show them without installing anything and without sending anything off your device. The point of grouping them together is to make the differences obvious — a 1440 × 900 CSS screen is not the same thing as a 1440 × 900 viewport, and neither is the same as 2880 × 1800 estimated device pixels on a 2× display. Reading them in one place is faster than chasing each value through developer tools, and copying them out makes it easy to keep a record before and after a change.
What the Screen Resolution Checker Actually Reads
A page that calls itself a screen resolution checker can mean very different things. Some sites report a single marketing number for the panel you are using; others try to guess your monitor model from the user agent string; still others just show a hard-coded chart of common resolutions. The version documented here is narrower and more honest about what it actually knows. It reads the values that this browser, in this tab, at this moment, is reporting through standard web APIs. There is no guesswork about panel type, EDID data, or hardware identifier. There is also no need to install an extension, grant a permission, or hand over a file — every field comes from values the page can read about itself.
That means the same tool on the same machine can give different numbers depending on the browser, the window mode, the zoom level, and the multi-display setup. A 1366 × 768 laptop running Chrome at 100 percent zoom, the same laptop running Firefox with a sidebar open, and the same laptop presenting through a remote desktop will not agree, and none of them are wrong. They are simply reporting different coordinate spaces. For a closer look at how those spaces relate to what your browser is actually willing to expose, the Display Size Test guide on what your browser actually reports walks through the same idea from a different angle.
The short version is that every number on the screen is one of three things: a CSS coordinate, an estimated device-pixel multiplication, or an unobservable physical value that the browser cannot honestly report.
Field by Field: What Each Number Means
The Screen Resolution Checker arranges the numbers into a clear table so that each field can be read at a glance instead of guessed from context. The table below pairs each label with its browser source, what the label represents, and what typically causes it to move.
| Field | Browser source | What it represents | Typical reason it changes |
|---|---|---|---|
| CSS screen | screen.width / screen.height | The coordinate space exposed to web content for the entire screen | Display change, multi-monitor arrangement, browser privacy reduction |
| Available screen | screen.availWidth / screen.availHeight | The screen minus operating-system UI such as a taskbar or dock | Docking a laptop, hiding the taskbar, moving to a new display |
| Viewport | window.innerWidth / window.innerHeight | The area currently available to the page layout inside the browser | Resizing the window, opening dev tools, adding a sidebar, zooming |
| Outer window | window.outerWidth / window.outerHeight | The full browser window including chrome, borders, and side panels | Resizing the window, changing browser UI density |
| Device pixel ratio | window.devicePixelRatio | The ratio the browser uses to convert CSS pixels to device pixels | Operating-system scaling, zoom changes, browser density |
| Estimated device pixels | round(CSS screen × DPR) | An estimate of the backing-store pixel count, not the native panel resolution | Anything that moves CSS screen or DPR |
| Orientation | Comparison of CSS screen width and height | Landscape, portrait, or square label based on the two reported numbers | Rotating a device, moving a window to a differently shaped display |
Three things are worth pointing out before reading any of these as the "real" resolution of your monitor. First, the CSS screen dimensions describe the coordinate space the browser hands to web pages, which is not necessarily the same as the panel's marketed or native pixel count. Second, the available screen can be smaller than the CSS screen because operating-system interface areas are excluded. Third, the viewport and outer window values describe the browser window itself, not the display — the same monitor can host many different viewport sizes over the course of a day.
How to Use the Screen Resolution Checker
- Open the Screen Resolution Checker in the browser tab where you want to measure the coordinate environment. The page fills in the CSS screen, available screen, viewport, outer window, device pixel ratio, estimated device pixels, and orientation label as soon as the values are available.
- Compare the CSS screen, available screen, viewport, and outer window numbers side by side. The gap between them is the most useful signal: a small gap usually means a near-fullscreen window with little browser chrome; a large gap means the browser is leaving room for toolbars, side panels, dev tools, or platform decorations.
- Review the devicePixelRatio and the estimated device-pixel multiplication. Treat the multiplication as a clearly labeled estimate, not as the panel's native resolution. If the multiplication looks wrong for the hardware, suspect browser zoom, operating-system scaling, a remote session, or privacy reduction before suspecting the panel itself.
- Resize the window, drag it to a different display, open a sidebar, enter fullscreen, or change browser zoom. The viewport and outer window values refresh on resize; the CSS screen value may or may not change depending on which display the window ends up on.
- Select Copy report to place the visible field names and numbers in plain text on the clipboard. Paste the report into a note, ticket, or chat so the conditions around the measurement are recorded.
- For a useful before-and-after comparison, copy the report before the change, make the change, then copy again. The difference between the two reports is what tells you how the coordinate environment actually moved.
Because the widget intentionally saves no history, the only record of a measurement is the text copied out of it. That is by design: nothing about the report needs to leave the device, but nothing is preserved automatically either.
CSS Pixels vs Estimated Device Pixels vs Physical Size
The most common confusion when reading a screen resolution checker is treating the largest number on the page as the monitor's actual resolution. Three different concepts live behind the digits.
CSS pixels are the unit web content is written in. They are an angular, density-independent measure that the browser scales to match how far away you sit and how dense the panel is. A 1440 × 900 CSS screen means the browser is handing web code a coordinate space of 1440 by 900 CSS pixels, no matter what the panel is doing underneath.
Device pixels are the actual light-emitting cells on the panel. The browser does not directly expose this number. It exposes a device pixel ratio (DPR), which it uses internally to convert between CSS pixels and the underlying backing store. The Screen Resolution Checker multiplies the CSS screen by the DPR and rounds to whole values to produce an estimate. For a CSS screen of 1440 × 900 at DPR 2, the estimate works out to round(1440 × 2) × round(900 × 2) = 2880 × 1800.
Physical size — diagonal in inches, dots per inch, pixel pitch, color depth, refresh rate — is not part of either calculation. The browser has no calibrated ruler, no EDID reader, and no trusted channel to the panel's hardware. The estimate is useful for reasoning about the relationship between CSS coordinates and a backing store, but it can be off when browser zoom, operating-system scaling, screenshots, remote desktops, multiple panels, or privacy reduction are in the mix. When a decision depends on the actual native panel resolution, fall back to the operating-system display settings or the manufacturer's specification rather than trusting the multiplication.
When Numbers Change: Resize, Zoom, and Multiple Displays
The Screen Resolution Checker updates on window resize, which is the single most useful behavior for comparing conditions. Drag the window to a second monitor and the CSS screen value can change. Maximize the window and the viewport climbs while the CSS screen stays put. Open developer tools on the side and the viewport shrinks by exactly the width of the panel. Switch browser zoom from 100 to 125 percent and the DPR moves, which drags the estimated device-pixel dimensions with it. Enter fullscreen and the viewport often matches the CSS screen because most of the browser chrome is gone.
A few patterns are worth knowing. Moving a window to a display with a different scaling factor tends to change both the CSS screen and the DPR. Presenting or remoting into another machine tends to report the virtual session's coordinate environment rather than the local panel's native pixel count. Privacy-focused browser configurations may intentionally reduce the precision of reported dimensions, which can make a 4K panel look like a generic 1024 × 768 to web pages. None of these are bugs in the tool — they are what the browser chooses to expose at that moment.
The clearest way to see how these layers interact is to copy a report, change one variable, copy another report, and compare the two. The Screen Resolution Checker will not tell you which layer caused a change, but it will show you that the coordinate environment moved.
What the Tool Cannot Measure
The contract behind the Screen Resolution Checker is deliberately narrow, and reading the numbers honestly depends on knowing where the line is. The tool cannot report inches, centimeters, millimeters, dots per inch, pixels per inch, pixel pitch, color depth, refresh rate, HDR capability, color gamut, peak brightness, panel type, physical diagonal, cable capability, GPU output mode, or EDID data. A normal web page does not receive enough trustworthy hardware information for any of those claims.
It also cannot lock device orientation, read an accelerometer, or describe how a hinged, folded, rotated, mirrored, projected, or multi-monitor setup is physically arranged. The portrait, landscape, or square label is only a classification of the two current reported numbers, not a statement about how the device is being held or where it sits in a room. For any decision that depends on those physical properties — buying a new monitor, calibrating color, diagnosing a flickering panel, matching a screen to a projector — use the operating-system display settings, the manufacturer's specification sheet, or a dedicated hardware tool. The browser has just enough information to be useful for layout and design decisions, and not enough to substitute for hardware reporting.
Privacy and Local Processing
Every value the Screen Resolution Checker shows comes from standard window and screen objects in this browser, in this tab, at this moment. The page does not upload a display identifier, a report, clipboard content, or any dimension off the device. It does not store a history between reloads. The Copy report action places visible fields in plain text on the clipboard, exactly as they appear on screen.
The narrow contract is worth restating because it shapes what the tool can be trusted to do. It validates that reported values are positive and finite. It calculates an openly described multiplication of CSS screen by device pixel ratio. It refreshes on resize. It distinguishes CSS coordinates from estimated device pixels and from unobservable physical size. That scope is what lets the page be private by construction: there is nothing to upload, because there is nothing the page needs from anywhere except this browser. If a screen resolution checker ever asks for a file, a login, or a hardware permission to show those numbers, that is a sign it is doing something different from the contract described here.