UD5 Toolkit
Screen Resolution Detector - Online Viewport Size Checker
Detect your current screen resolution, viewport dimensions, and device pixel ratio. Useful for responsive design testing. No data collection.
Device Pixel Ratio Checker - Online See Your DPR
Device Pixel Ratio Checker
Instantly detect your screen's DPR and understand what it means for your display.
Your Device Pixel Ratio
--
Loading...
DPR = physical pixels / CSS pixels
--
Screen Width
--
Screen Height
--
Viewport Width
--
Viewport Height
--
Physical Pixels (W)
--
Physical Pixels (H)
Common Device Pixel Ratios
| Device / Display | Typical DPR | Resolution Example |
|---|---|---|
| Standard desktop monitor | 1.0 | 1920×1080 (CSS) |
| MacBook Pro (Retina) | 2.0 | 1440×900 (CSS) → 2880×1800 |
| iMac 5K | 2.0 | 2560×1440 (CSS) → 5120×2880 |
| iPhone 14 Pro Max | 3.0 | 430×932 (CSS) → 1290×2796 |
| iPhone 12 / 13 | 3.0 | 390×844 (CSS) → 1170×2532 |
| iPhone SE (3rd gen) | 2.0 | 375×667 (CSS) → 750×1334 |
| iPad Pro 12.9" | 2.0 | 1024×1366 (CSS) → 2048×2732 |
| Samsung Galaxy S23 Ultra | 3.0 | ~384×854 (CSS) → 1440×3088 |
| Google Pixel 7 | 2.75 | 412×915 (CSS) → 1080×2400 |
| 4K laptop display (15.6") | 1.5 - 2.0 (scaled) | 1920×1080 (CSS) → 3840×2160 |
DPR varies by OS scaling settings and browser zoom level. The values above are typical at default scaling.
Frequently Asked Questions
Device Pixel Ratio is the ratio between physical pixels (hardware) on a screen and logical (CSS) pixels used in web design. For example, a DPR of 2 means 2 physical pixels are used to render 1 CSS pixel, resulting in sharper text and images on high-resolution screens.
Understanding DPR helps you serve appropriately sized images (
srcset), use media queries for high‑resolution displays, and ensure crisp UI elements. Ignoring DPR can lead to blurry graphics on Retina or 4K screens.
DPR =
window.devicePixelRatio in JavaScript. It measures how many physical pixels there are per CSS pixel. It can also be approximated by dividing the screen's physical width by the CSS viewport width when at default zoom.
Yes, DPR can change when a user zooms in or out in the browser, or when a window is moved between monitors with different scaling settings (e.g., dragging a window from a Retina laptop to an external 1x monitor). This tool updates in real time when the window is resized or moved.
Screen resolution (e.g., 1920×1080) is the total number of physical pixels. DPR tells you how those pixels are mapped to CSS dimensions. A 3840×2160 screen can have a DPR of 2, meaning its CSS resolution behaves like 1920×1080.
Use the
srcset attribute on <img> tags to provide multiple resolutions. For backgrounds, use image-set() in CSS. Always provide images at least twice the CSS size for 2x DPR, and 3x for 3x DPR.
Values update automatically on window resize. Move the window between screens or zoom to see changes.
Online Screen Ruler - Measure Pixels & Inches on Screen
An on‑screen ruler that measures in pixels, centimeters, and inches. Drag to resize. Handy for UI designers and developers.
On‑Screen Pixel Ruler - Online Measure Elements in Browser
Drag a virtual ruler across your screen to measure pixel distances. Horizontal and vertical guides. Useful for UI designers checking alignment.
Color Contrast Ratio Tester - Online WCAG AA/AAA Check
Enter foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Simple Uptime Monitor - Online Check Website Status from Your Browser
Enter a URL and click to check if it's reachable from your browser (CORS-limited, uses no-cors fetch). Quick manual test. Local only.
Two‑Value Display Syntax Playground - Online Outer & Inner
Explore the new two‑value display syntax like `display: block flex`. See what each inner/outer pair does visually.
Screen Color Depth Checker - Online 8‑bit vs 16‑bit
See your monitor's color depth and pixel depth. Detect if HDR or wide gamut is available using media queries.
GeoJSON Validator - Online Check Geometry & Properties
Paste a GeoJSON object and validate its structure. Catch missing coordinates, wrong types, and feature errors. Local.
HTML Validator Lite - Online Check Syntax Errors
Paste HTML and detect unclosed tags, invalid nesting, and duplicate IDs. Lightweight client‑side validation.
Skip Link Validator - Online See Bypass Blocks
Check if your site has a visible and functional skip navigation link. Key for keyboard‑only users.
CSS visibility & display Demo - Online Show/Hide Effects
Compare visibility: hidden vs display: none. See how each affects layout and event listeners. Inline code.
SQL Syntax Validator - Online Quick Check
Paste your SQL query and check for basic syntax errors. Highlights missing commas, wrong keywords. Local analysis.
Number to English Words - Online Write Out Checks
Enter any number up to trillion and get the English word representation. For filling out checks or legal documents.
ISBN Validator - Online Check ISBN‑10 & ISBN‑13
Validate ISBN‑10 and ISBN‑13 numbers and compute their check digits. Useful for booksellers and libraries. All local.
Semantic Versioning Validator - Check Semver Syntax
Validate if a version string follows SemVer 2.0.0. Also sort and compare versions. Developer tool.
Weak Password Dictionary Check - Online Top 10k List
Compare your password against a built‑in list of the 10,000 most common passwords. Instant warning if it appears.
Base64 String Validator - Online Check Valid Encoding
Paste a string and verify if it is valid Base64. Auto‑detects padding issues and character errors. Quick dev check.