Physical Resolution
—
screen.width × screen.height
Viewport (CSS pixels)
—
innerWidth × innerHeight
Device Pixel Ratio
1.00x
physical ÷ CSS pixels
Effective Resolution
—
DPR × CSS viewport
Color Depth
—
bits per pixel (reported)
Orientation
—
screen orientation
⚠ Effective resolution (—) differs from physical (—) — check Display Settings
Test 1 — 1-Pixel Sharpness Grid
This canvas is filled with alternating 1-pixel black and white columns. At native resolution, you should see crisp vertical stripes. If the pattern looks grey or blurry, your monitor is not rendering at its native resolution — every other pixel is being merged.
What to look for: distinct black and white stripes = native resolution ✓ | uniform grey = non-native resolution ✗
1px alternating columns — zoom in on mobile to verify
Result: Canvas rendered at 800×120 physical pixels (DPR 1.00×). Each column above is exactly 1 physical pixel wide. If you see alternating stripes, your display is rendering at pixel-perfect precision.
Test 2 — Subpixel Checkerboard
A true 1-pixel checkerboard pattern. At native resolution, this should appear as a uniform mid-grey when viewed at normal distance (the pixels are too small to see individually). If you see a coarse grid pattern, you may be zoomed in or using a low-PPI display.
What to look for: smooth, even grey at arm's length = high PPI display ✓ | visible grid = low PPI or zoomed in
1px checkerboard — appears grey at 100+ PPI when at native resolution
Test 3 — Color Depth & Gradient Banding
A smooth gradient from black to white tests whether your display can render all 256 brightness levels of an 8-bit panel. Visible stepped bands indicate a 6-bit panel, Limited RGB range output from your GPU, or a poor-quality cable compressing the signal.
What to look for: perfectly smooth gradient = 8-bit panel, Full RGB ✓ | visible steps or bands = 6-bit or Limited RGB output ✗
Black-to-white gradient — look for smooth transition vs. visible steps
Test 4 — RGB Channel Gradients
Three independent channel gradients (red, green, blue). Chroma subsampling artifacts appear as uneven gradients in the red or blue channel while green looks smooth, because 4:2:0 subsampling preserves luminance (green-dominant) but compresses chrominance channels. If red or blue look stepped while green is smooth, your cable is bandwidth-limited.
What to look for: all three gradients equally smooth = full 4:4:4 color output ✓ | red/blue banded, green smooth = chroma subsampling active ✗
R / G / B channel gradients — compare smoothness between channels
Test 5 — Text Rendering Sharpness
Text at multiple sizes rendered on a canvas at the device's actual pixel ratio. On a high-DPR display (Retina, 4K with scaling), the smallest text size should still be crisp and legible. On a standard 1x display at native resolution, text should have clean, anti-aliased edges without colored fringes.
Check for clean letter edges to verify correct resolution. Fuzzy edges indicate scaling or subsampling issues.
Text rendered at 8px, 10px, 12px, 14px, 16px at device DPR
🔬 Testing methodology and accuracy guidelines
Methodology: This checker queries display dimensions and draws 1-pixel alignment pattern coordinates on canvas buffers to evaluate sharpness. By matching pattern configurations with layout specifications, it visually detects resolution scaling or signal interpolation. However, this query cannot bypass operating system scaling abstractions or identify hardware subpixel layout defects.
Limitations: Browser diagnostics rely on engine reporting APIs which are subject to layout sandboxing. Operating system scaling (e.g., Windows DPI scaling or macOS Retina display scaling) and browser zoom levels alter the reported layout viewport. Because browser engines sandbox queries, JS APIs (like window.innerWidth and screen.width) report virtual CSS pixels rather than physical pixels. Physical pixels must be calculated using the Device Pixel Ratio (window.devicePixelRatio). Detailed guidance on how OS display scaling affects layouts can be found in developer resources from Microsoft and Apple.
Privacy: Screen diagnostics run in your browser. ScreenRes.app does not need to store your display measurements for the tool to work. Some third-party services, such as advertising or consent tools, may use cookies or similar technologies. For details, view our tool accuracy and privacy statement.
Our diagnostics follow our testing methodology and editorial policy. Under these standards, tools are verified for technical accuracy periodically.
How to interpret your results
If Test 1 (1px grid) looks grey and blurry
Your monitor is not running at its native resolution. In display settings, select the resolution marked (Recommended), which is the panel's native hardware state. Any other resolution forces interpolation, causing blur.
If Tests 3 or 4 show banding or uneven channels
Your GPU may be outputting Limited RGB (16–235) instead of Full RGB (0–255), causing crushed blacks. In Windows, open the NVIDIA Control Panel or AMD Radeon Software, navigate to Display → Output Color Format and set it to RGB Full (0–255).
Alternatively, your cable may be causing chroma subsampling. Replace HDMI 1.4/2.0 with HDMI 2.1 or DisplayPort 1.4.
If text (Test 5) has colored fringes
Colored fringes around text (especially red/blue halos on white backgrounds) are the classic signature of chroma subsampling caused by cable bandwidth limitation. This is most common when running a 4K monitor at 60Hz+ via HDMI 1.4. The fix is replacing the cable with a certified high-bandwidth alternative.
How to check if your resolution is truly correct
Compare the Physical Resolution card at the top of this page with your monitor's spec sheet. They should match exactly. If your monitor is 2560×1440 but the tool reports 1920×1080, your resolution is wrong regardless of what Windows labels "Recommended."
Both numbers are correct, but they measure different things. See our full DPI vs PPI guide for a deeper explanation.
Common screen resolution test questions
Is this test accurate?
The resolution values read by this tool are directly from your browser's JavaScript APIs (screen.width, screen.height, window.devicePixelRatio), which are exact values reported by your OS, not estimates. The canvas tests render at the actual device pixel level, ensuring they are drawn at physical pixel precision rather than CSS pixel precision.
Why does my physical resolution differ from my viewport?
Because the browser renders in CSS pixels, not physical pixels. A 4K display at 150% scaling has 3840 physical pixels across but the browser sees it as 2560 CSS pixels wide. The Device Pixel Ratio (1.5 in this case) bridges the two.
What should I do after finding an issue?
- Wrong resolution: Fix blurry screen on Windows - set to native (Recommended) resolution
- Gradient banding: Change GPU output from Limited RGB to Full RGB in driver settings
- Chroma subsampling (colored text fringes): Replace cable with HDMI 2.1 or DisplayPort 1.4
- Low PPI / coarse checkerboard: See our PPI guide to evaluate if your monitor has adequate pixel density
Frequently asked questions
How do I know if my monitor is at native resolution?
Check the Physical Resolution card at the top of this page; it must match your monitor's spec sheet exactly. Additionally, if the 1-pixel sharpness test shows crisp black-and-white stripes (not grey), your resolution is correct. On Windows, make sure the resolution with "(Recommended)" is selected.
What is chroma subsampling and how does it make text blurry?
Chroma subsampling (4:2:0 or 4:2:2) compresses color data to fit cable bandwidth limits. If your cable cannot support your resolution and refresh rate, the GPU activates subsampling, making text blurry with colored fringes. Fix this by using a certified HDMI 2.1 or DisplayPort 1.4 cable.
Why does the gradient look banded on my screen?
Gradient banding has two main causes: (1) a 6-bit panel that can only physically render 64 steps per channel rather than 256, and (2) Limited RGB output from your GPU, which clips the darkest blacks and brightest whites. For cause 2, open your GPU driver (NVIDIA Control Panel or AMD Radeon Settings) → Display → set Output Color Range to Full (0–255).
What does Device Pixel Ratio mean?
Device Pixel Ratio (DPR) compares physical screen pixels to CSS logical pixels. For example, a DPR of 2 means each CSS pixel uses four physical pixels in a 2x2 grid, creating crisp text and graphics. Check your live DPR on our homepage resolution checker.