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.
Image Difference Checker - Online Visual Compare
Upload two images and see a diff overlay highlighting the pixel differences. Adjust tolerance. For regression testing.
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.
Pixel Sharp Image Upscaler - Online Nearest‑Neighbour Enlarge
Enlarge pixel art or low‑res images without blur. Choose 2x, 4x, 8x. Perfect for sprites. Download scaled PNG.
Pixel Art Upscaler - Online Nearest‑Neighbour Enlarge
Enlarge pixel art or low‑res images without blur. Choose 2x, 4x, 8x. Perfect for sprites. Download scaled PNG.
Image Pixelator - Online Censor & Mosaic Effect Tool
Pixelate or censor parts of an image by dragging. Adjust block size for mosaic effect. Useful for hiding faces or sensitive data. Client-side processing.
Web Image Size Calculator - Online KB & Dimensions Tool
Predict the file size of an image based on pixel dimensions and format (JPEG, PNG, WebP). Rough estimate. Local.
Meta Tag Length Checker - Online Title & Description Pixel Width
See how your title and meta description will be truncated in Google SERP by pixel width. Optimize click‑through.
aspect‑ratio with min/max Demo - Online Responsive Boxes
Combine aspect‑ratio with min‑/max‑width/height and see how the box responds. Understand sizing constraints. Copy the pattern.
Image Aspect Ratio Fitter - Online Resize to Exact Fit
Resize and crop an image to a specific aspect ratio (1:1, 16:9…) with automatic fit/cover. Download the perfect image.
Video Metadata Viewer - Online Check Codec, Bitrate & Size
Drop a video file and instantly see its container format, codec(s), resolution, duration, and bitrate. Browser‑based, no upload.
JPEG Quality Visual Comparator - Online Side‑by‑Side
Upload an image and see a slider comparison of different JPEG quality levels. Find the optimal file size vs. quality trade‑off.
Photo Print Size Guide - Online Aspect Ratio to Dimensions
Enter image pixel dimensions and compute maximum print size at various DPI. With aspect ratio presets (4x6, 5x7, 8x10) and cropping preview. Local tool.
HSL to HEX Converter - Online Hue Saturation Lightness to Hex
Convert HSL and HSLA color specifications back to standard HEX codes. Useful when extracting colors from CSS preprocessors. Instant client-side conversion.
Online Video Resizer - Crop & Scale Locally
Resize a video by cropping to a new aspect ratio or scaling up/down. Apply and download the result. Browser‑based.
CSS Media Query Range Tester – Online Width/Height Debug
Paste media queries and see a visual indicator of which rules apply at current viewport size.
Image to Pixel HTML Table - Online Giant Pixel Art
Downscale an image to a grid of colored `<td>` cells. Create a huge HTML pixel art. Copy the code.
Webcam Color Detector - Online Live Hue Picker
Point your camera at an object and see the dominant color in real time. Click to copy the hex. Fun tool for designers.
Live Page Color Blindness Check – Online Enter URL
Enter a website URL and apply a protanopia/deuteranopia/tritanopia filter. Test full page accessibility.
Image Brightness & Contrast Slider - Online Photo Tune
Quickly adjust the brightness and contrast of an image with live preview sliders. Download the tuned photo. Canvas.
Dominant Color Detector - Online Find Main Hue
Upload an image and instantly see its most dominant color as a hex swatch. Uses color quantization. Local.
Image Edge Detector - Online Sobel & Canny Filter
Run edge detection algorithms (Sobel, basic Canny) on images directly in the browser. Great for learning computer vision concepts.
Pixel Data to BMP Generator - Online Raw Image Builder
Enter RGB values row by row and create a tiny BMP file. Understanding bitmap headers. Geeky developer tool.
shape‑margin & shape‑image‑threshold Tester
Wrap text around an irregular shape and adjust the margin and alpha threshold. Magazines layout on the web.
CSS Aspect Ratio Box Generator - Online Intrinsic Size
Create a responsive box that maintains a specific aspect ratio using the aspect‑ratio property. Copy the simple CSS.
Image Saturation Adjuster - Online Color Pop Editor
Increase or decrease the color saturation of your photo with a slider. Preview instantly. Download the edited image. Canvas‑based.
Responsive Image Breakpoints Generator - Online srcset Wizard
Upload one image at multiple widths and generate the complete img srcset and sizes attributes. Perfect for performance.
Image Color Quantizer - Online Reduce Colors to 8‑bit Palette
Reduce the number of colors in an image to a retro 8‑bit look. Uses median cut quantization in the browser. Preview and download the stylized result.
Shutter Speed Cheat Sheet - Online Photography Exposure Reference
Quick reference of common shutter speeds and when to use them (freeze motion, long exposure). Static photographic guide.
Auto Image Enhancer - Online One‑Click Photo Fix
Automatically adjust brightness, contrast, and saturation of a photo. Click to enhance and download. Canvas‑based.