What Is My Screen Resolution

Metric	Value	Copy
{{ r.key }}	{{ r.value }}

Screen resolution is the count of pixels across and down a display, and it sets the canvas for everything you see and build. Accurate screen resolution and viewport size measurement helps you plan layouts, pick breakpoints, and compare devices without guesswork. Enter your diagonal only if you want a size estimate, then read the numbers like a checklist you can share.

Viewport size reports the space available to your page after toolbars and chrome, so it reflects the area your content can actually use. The app can also estimate pixel density in plain language when you provide a diagonal, which helps explain why the same layout can look sharper on some screens.

Aspect ratio summarizes shape as a simple pair like 16 to 10, and orientation tells you whether width currently exceeds height. Color depth shows how many bits the screen uses for color, and the device pixel ratio records how many device pixels map to a single CSS pixel.

A quick example helps. A laptop might report 1920 by 1080 for the screen and 1536 by 864 for the viewport on a zoomed display, and a 13.3 inch diagonal would yield a high density estimate that matches a crisp look.

Treat the diagonal as a helper rather than a truth meter, since catalogs and scaling can differ. If a value seems odd, recheck units, try full screen, and rotate the device to see how the numbers change.

Technical Details:

The tool observes two pixel domains: the physical screen pixel dimensions and the page’s viewport pixel dimensions. It also reads device pixel ratio, color depth, orientation, and a reduced aspect ratio label. When a diagonal in inches is supplied, it transforms pixel counts into estimated physical width, height, and pixel density.

Pixel density is expressed as pixels per inch and also labeled with the familiar dots per inch term once. Device pixel ratio scales pixel measures from CSS space to the device’s pixel grid, which is required for density estimates to match what your eyes see.

Warnings appear only at extremes to flag likely input or environment issues. Very small diagonals, very large diagonals, and implausibly low or high density are called out so you can recheck units or display scaling.

Comparisons are most meaningful on the same device with the same zoom and scaling settings. Values can differ across platforms because CSS pixels are abstracted from physical pixels to keep content legible.

\begin{matrix} d_{px} & = & \sqrt{{(w \times dpr)}^{2} + {(h \times dpr)}^{2}} \\ ppi & = & \frac{d_{px}}{d_{in}} \\ w_{in} & = & \frac{w \times dpr}{ppi} \\ h_{in} & = & \frac{h \times dpr}{ppi} \end{matrix}

Symbols and units
Symbol	Meaning	Unit/Datatype	Source
`w`	Screen width in pixels	px	Observed
`h`	Screen height in pixels	px	Observed
`vw`	Viewport width in pixels	px	Observed
`vh`	Viewport height in pixels	px	Observed
`dpr`	Device pixel ratio	ratio	Observed
`cd`	Color depth per pixel	bits	Observed
`ar`	Aspect ratio reduced to X:Y	string	Derived
$d_{in}$	Diagonal length	in	Input
$d_{px}$	Diagonal pixels	px	Derived
`ppi`	Pixels per inch (density)	px/in	Derived
$w_{in}$	Estimated physical width	in	Derived
$h_{in}$	Estimated physical height	in	Derived

Worked example

Given w=1920, h=1080, dpr=2, and $d_{in}$ =13.3:

d_{px} = \sqrt{{(1920 \times 2)}^{2} + {(1080 \times 2)}^{2}} \approx 4405.8 px

ppi = \frac{4405.8}{13.3} \approx 331.3 px/in

w_{in} = \frac{3840}{331.3} \approx 11.59 in

h_{in} = \frac{2160}{331.3} \approx 6.52 in

Interpretation: density near 300 px/in reflects a high‑clarity display; values change if scaling or diagonal changes.

Warning thresholds and their meaning
Condition	Lower	Upper	Implication
Diagonal seems very small	> 0 in	< 2 in	Recheck units; inches are required.
Diagonal seems very large	> 120 in	—	Recheck value; unusually large for a desktop setup.
Estimated density unusually low	—	< 50 px/in	Possible TV‑class scale or incorrect diagonal.
Estimated density unusually high	> 1000 px/in	—	Likely unit or scaling mismatch.

Units and rounding: density rounds to one decimal; estimated width and height round to two decimals. Aspect ratio reduces integers using the greatest common divisor. Values are reported using a period as the decimal separator.

Validation and bounds
Field	Type	Min	Max	Step/Pattern	Error Text	Placeholder
Diagonal size (in)	Number	0	—	0.1	Warnings appear for implausible values	None

I/O formats
Input	Accepted Families	Output	Encoding/Precision	Rounding
Diagonal inches	Numeric	Table of metrics	Text	As above
—	—	CSV snapshot	UTF‑8	As displayed
—	—	JSON payload	Pretty printed	As displayed

Networking and storage: all measurements are computed in the browser. Copy actions write to your clipboard on demand, and downloads are created locally as CSV and JSON files.

Performance and complexity: updates are debounced by roughly 40 ms after layout‑affecting events. Aspect‑ratio reduction uses the Euclidean algorithm and runs in negligible time.

Diagnostics and determinism: with the same inputs and scaling, the same device yields identical results. Changes in zoom, OS scaling, toolbars, or rotation will legitimately change the reported viewport.

Security considerations: no secrets or tokens are required. Only user‑initiated actions access the clipboard or trigger file downloads. Avoid pasting sensitive values into shared documents.

Assumptions & limitations

Diagonal must be in inches; centimeters are not accepted.
Catalog diagonals may differ from measured viewable area. Heads‑up
OS scaling and zoom affect viewport but not screen pixel counts.
Color depth reflects reported capability, not calibrated gamut or HDR.
External monitors may report rounded pixel counts.
Mobile UI chrome can reduce viewport height in subtle ways.
Windowed apps reduce viewport relative to screen metrics.
Docking and mirroring modes can change orientation reporting.

Edge cases & error sources

Non‑integer scaling can make viewport an odd number of pixels.
Virtual desktops may spoof orientation until a resize occurs.
Multiple displays with differing density can confuse expectations.
Very high density can produce rounding that hides small changes.
Temporary toolbars on mobile shift viewport during scroll.
Device pixel ratio may report as 1 during compatibility modes.
Color depth can under‑report in remote or virtual sessions.
Fullscreen video changes viewport between frames.
Accessibility zoom features alter effective viewport.
Browser UI experiments can move chrome and affect height.

Step‑by‑Step Guide:

Screen and viewport measurements with an optional diagonal estimate.

Note the screen and viewport numbers shown at the top.
Open Advanced and enter Diagonal size (inches) if you want physical estimates.
Read the aspect ratio, orientation, and color depth for context.
Switch between Table and JSON to view structured results.
Use Copy CSV or Copy JSON to place data on your clipboard.
Use Download CSV or Download JSON to save files locally.

Example: Enter 13.3 for a compact laptop; you will see width and height in inches and a density around 300 px per inch when the screen is 1920 by 1080 with a device pixel ratio of 2.

You now have a shareable snapshot for layout and display comparisons.

FAQ:

Is my data stored?

No. Measurements and estimates are computed in your browser. Clipboard writes and downloads happen only when you click.

How accurate is the density estimate?

It depends on the diagonal you provide and your scaling settings. Correct inches and stable zoom produce consistent, practical estimates.

What units should I use?

Inches only. The input rejects negative values and uses a 0.1 increment for convenience.

Can I use it without a connection?

Once the page is open, measurements continue to work without a connection because they read your device environment directly.

How do I capture a JSON snapshot?

Switch to the JSON tab, then use Copy JSON or Download JSON. The payload includes inputs, metrics, and derived estimates.

What does a borderline warning mean?

It signals an implausible diagonal or density. Recheck units, scaling, and whether an external monitor is active.

Why do screen and viewport differ?

Viewport excludes browser chrome and some system UI, so it is usually smaller than the full screen pixel dimensions.

What is color depth telling me?

It is the number of bits per pixel your display pipeline reports, commonly 24, and it is not a calibration or gamut measure.

Troubleshooting:

Numbers flicker while resizing: wait a moment; updates are debounced.
Density looks too low: confirm inches and check display scaling.
Viewport is tiny: browser UI or split‑view may be reducing space.
Aspect ratio seems odd: ensure the window is not snapped or rotated.
Copy buttons do nothing: allow clipboard access or try Download instead.
JSON is hard to read: use the JSON tab for syntax‑highlighted output.

If warnings persist with believable inputs, remove scaling, reenter the diagonal in inches, and retry in fullscreen.

Advanced Tips:

Tip Keep zoom at 100% when comparing viewport across devices.
Tip Use a physical ruler to confirm diagonal; round to the nearest tenth.
Tip Record both screen and viewport; they answer different questions.
Tip Rotate the device to test responsive breakpoints quickly.
Tip Recheck density after changing OS scaling or display profiles.
Tip Save a CSV snapshot before and after adjustments for clean diffs.

Glossary:

Screen resolution: Pixel width and height reported by the display.
Viewport: The page’s usable pixel area excluding browser chrome.
Device pixel ratio (DPR): Device pixels per CSS pixel; scales visual detail.
Pixels per inch (PPI): Estimated pixel density from pixels and diagonal inches.
Dots per inch (DPI): Alternate name for pixel density used in displays and print.
Aspect ratio: Width to height reduced to simplest whole numbers.
Color depth: Bits per pixel indicating available color precision.
Orientation: Landscape when width exceeds height; otherwise portrait.