Resolution Checker
Detect your display's physical resolution, logical resolution, and device pixel ratio (DPR). Verify what your screen is actually rendering, not what the OS reports.
Why use this calculator tool
Physical resolution detection
Reads window.screen properties to report your display's actual pixel dimensions.
Logical (CSS) resolution
Shows CSS pixel dimensions — what web developers actually target when designing layouts.
Device pixel ratio (DPR)
Reports DPR (1, 2, or 3) — the ratio of physical to logical pixels. Critical for responsive design.
Viewport and color depth
Also reports current viewport size, color depth, and pixel depth for complete display info.
What is calculator
Resolution is the pixel dimensions of your display, expressed as width × height (e.g., 1920×1080). There are two flavors: physical resolution (the actual pixel count of the panel) and logical resolution (what the OS renders at, after scaling). The ratio of the two is the device pixel ratio (DPR).
On a standard display, DPR is 1 — one CSS pixel equals one physical pixel. On a Retina display, DPR is 2 — one CSS pixel equals 2×2 physical pixels, so the panel has twice the linear resolution of the logical resolution. On high-density phones, DPR is 3. The OS uses scaling so UI elements remain usable despite the high pixel count.
Web developers care about logical resolution (CSS pixels); hardware folks care about physical resolution. A phone with 1080×2400 physical pixels at DPR 3 has a logical resolution of 360×800 CSS pixels. The resolution checker reports both, plus DPR and color depth, giving you a complete picture of your display's rendering.
How to test
Step 1: Open the test
Click "Detect resolution". The widget reads your display's properties and shows them instantly.
Step 2: Read physical resolution
The actual pixel dimensions of your panel — e.g., 3840×2160 for 4K.
Step 3: Read logical resolution
The CSS pixel dimensions after OS scaling — e.g., 1920×1080 at 200% scaling on 4K.
Step 4: Check DPR
DPR 1 = standard display; DPR 2 = Retina/high-density; DPR 3 = mobile high-density.
Step 5: Verify expected values
Compare to your monitor's spec sheet. Mismatches indicate wrong OS scaling or GPU output settings.
Common causes of calculator issues
OS scaling
Windows and macOS scale UI on high-DPI displays. A 4K display at 150% scaling has DPR 1.5 and logical resolution 2560×1440.
Browser zoom
Browser zoom (Ctrl++) changes the CSS pixel size without affecting physical resolution, changing the apparent logical resolution.
Wrong display settings
If Windows is set to a lower resolution than the panel's native, the display upscales and looks soft.
GPU output limits
Some GPUs can't drive full 4K@60Hz; they fall back to lower resolution or refresh rate. Check GPU specs.
Frequently asked questions
Testing tips
- Reset browser zoom (Ctrl+0) before testing for accurate logical resolution.
- Compare detected physical resolution to spec sheet — mismatches indicate wrong settings.
- Use native resolution always; lower resolutions are upscaled and look soft.
- On 4K monitors, 150% scaling balances sharpness with usable UI size.
Related tools
Physical vs Logical Resolution: Understanding DPR
You design a website assuming 1920×1080 resolution, but on your 4K monitor it looks tiny. You check the resolution and it says 1920×1080 — but your monitor is 3840×2160. What's going on? The answer lies in the difference between physical and logical resolution, and the device pixel ratio (DPR) that connects them. Understanding DPR is essential for modern web development and display configuration.
Physical resolution is the actual pixel count of the panel — 3840×2160 for 4K, 1920×1080 for Full HD. This is what the hardware delivers and what monitor spec sheets advertise. Logical resolution is what the OS renders at, after applying scaling. On a 4K display with 200% scaling, the logical resolution is 1920×1080 — the OS treats the display as if it were 1080p but renders each logical pixel as a 2×2 block of physical pixels.
The ratio of physical to logical is the device pixel ratio (DPR). DPR 1 means one CSS pixel equals one physical pixel — standard for non-Retina displays. DPR 2 means one CSS pixel equals 2×2 physical pixels — Retina displays, high-density monitors. DPR 3 means one CSS pixel equals 3×3 physical pixels — modern phones. Web developers use DPR to serve appropriately sized images: a 100×100 CSS pixel image needs to be 200×200 physical pixels on a DPR 2 display to look sharp.
Test your display with our resolution checker. The widget reads window.screen properties to report physical resolution, logical resolution, DPR, viewport size, and color depth. Compare detected physical resolution to your monitor's spec sheet — mismatches indicate wrong OS settings or GPU output. A 4K monitor showing 1920×1080 physical is running at non-native resolution and will look soft; switch to native in display settings.
OS scaling is the source of most confusion. macOS applies 200% scaling on Retina displays by default, so a 2880×1800 MacBook Pro panel reports 1440×900 logical (DPR 2). Windows offers scaling presets (100%, 125%, 150%, 200%) on high-DPI displays. Browser zoom (Ctrl+/-) further adjusts CSS pixel size without changing physical resolution. Reset browser zoom (Ctrl+0) before testing for accurate logical resolution readings.
Web developers must understand DPR to serve sharp images. Use the `srcset` attribute with `1x`, `2x`, `3x` variants so the browser picks the right resolution image based on DPR. Use SVG or vector formats where possible — they scale without quality loss. For game developers, the logical resolution is your render target; the physical resolution is what gets displayed. Pair the resolution checker with our screen size calculator and refresh rate test for a complete display audit.
Run the resolution checker now
Free, no download, runs in any browser.
Browse all tools