No Login Data Private Local Save

Device Pixel Ratio Checker - Online See Your DPR

20
0
0
0

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 monitor1.01920Ă—1080 (CSS)
MacBook Pro (Retina)2.01440×900 (CSS) → 2880×1800
iMac 5K2.02560×1440 (CSS) → 5120×2880
iPhone 14 Pro Max3.0430×932 (CSS) → 1290×2796
iPhone 12 / 133.0390×844 (CSS) → 1170×2532
iPhone SE (3rd gen)2.0375×667 (CSS) → 750×1334
iPad Pro 12.9"2.01024×1366 (CSS) → 2048×2732
Samsung Galaxy S23 Ultra3.0~384×854 (CSS) → 1440×3088
Google Pixel 72.75412×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.

🔧 Related Tools