Device Pixel Ratio Checker
Instantly see your device pixel ratio, CSS viewport, screen resolution in CSS and physical pixels, color depth and media-query features, updated live as you zoom or resize. Add your screen size to get its pixel density (PPI). Nothing is sent anywhere.
Screen PPI calculator
Your physical resolution is filled in. Enter your screen's diagonal size (or tap a common size) to get its pixel density.
Media features
| Media feature | Your value |
|---|
How to use the Device Pixel Ratio Checker
- Read your device pixel ratio at the top: it updates immediately when you zoom the page or drag the window to another monitor.
- Check the details: viewport, screen resolution in CSS and physical pixels, color depth, orientation and media features.
- Calculate PPI: the resolution is prefilled from your screen; enter the diagonal in inches (or tap a common size) and press Calculate PPI.
- Copy the report to share your display details with a developer or support team.
CSS pixels, device pixels and DPR
Websites are laid out in CSS pixels, a unit that stays roughly the same visual size on every device. The screen itself is made of device (physical) pixels. The device pixel ratio links the two:
device pixels = CSS pixels × devicePixelRatio- A phone with a 390 × 844 CSS viewport and DPR 3 draws the page with 1170 × 2532 physical pixels.
- A Windows laptop with a 1920 × 1080 panel at 125% display scaling reports a 1536 × 864 CSS screen and a DPR of 1.25.
- Browser zoom multiplies the DPR on desktop: a DPR 2 MacBook at 110% zoom reports 2.2.
Developers use DPR to serve sharp images (srcset with 2x and 3x sources, or the resolution media query) and to size canvas elements: set the canvas width to cssWidth × devicePixelRatio and scale the drawing context to avoid blurry graphics.
PPI formula and examples
Pixel density in pixels per inch is the diagonal resolution divided by the diagonal size: PPI = √(width² + height²) ÷ diagonal. Dot pitch, the distance between pixel centers, is 25.4 ÷ PPI millimeters.
| Screen | Resolution | PPI | Typical DPR |
|---|---|---|---|
| 24″ Full HD monitor | 1920 × 1080 | 91.8 | 1 |
| 27″ QHD monitor | 2560 × 1440 | 108.8 | 1 |
| 27″ 4K monitor | 3840 × 2160 | 163.2 | 1.5 or 2 |
| 15.6″ Full HD laptop | 1920 × 1080 | 141.2 | 1.25 |
| 13.3″ 2560 × 1600 laptop | 2560 × 1600 | 227.0 | 2 |
| 6.1″ phone | 1170 × 2532 | 457.3 | 3 |
The physical resolution this tool shows is screen size × DPR, so check it at 100% browser zoom. To measure real objects on your screen, calibrate the online ruler; for a broader overview of your display, see What Is My Screen Resolution.
Media features explained
- hover / pointer:
hover: hoverwithpointer: fineusually means a mouse or trackpad;hover: nonewithpointer: coarsemeans a touchscreen. Theany-versions check every connected input. - prefers-color-scheme, prefers-reduced-motion, prefers-contrast: reflect your operating-system accessibility and theme settings.
- color-gamut:
srgbis standard,p3means a wide-gamut display (most recent Apple devices and many OLED phones),rec2020is wider still. - dynamic-range: high means the browser and display can show HDR content.
Frequently asked questions
What is device pixel ratio (DPR)?
Device pixel ratio is the number of physical screen pixels used to draw one CSS pixel. A DPR of 1 means one device pixel per CSS pixel, while a DPR of 2 (common on Retina and high-density screens) means each CSS pixel is 2 × 2 device pixels, which makes text and images sharper.
Why does my device pixel ratio change when I zoom?
In desktop browsers, page zoom changes the device pixel ratio: at 150% zoom on a DPR 1 monitor the ratio becomes 1.5, because each CSS pixel now covers 1.5 device pixels. Operating-system display scaling (for example 125% in Windows) also shows up in the DPR. Pinch-zoom on phones does not change DPR; it is shown separately as the visual viewport scale.
How do I find the PPI of my screen?
PPI (pixels per inch) = √(width² + height²) ÷ diagonal in inches, using the physical resolution. For example, a 27-inch 2560 × 1440 monitor has √(2560² + 1440²) ÷ 27 ≈ 108.8 PPI. Enter your screen diagonal in the calculator and it does the math for you.
Is the physical resolution shown always exact?
It is an estimate: screen width and height in CSS pixels multiplied by the device pixel ratio. It is exact at 100% browser zoom on most devices, but if you are zoomed in, or your system uses fractional scaling, the result can differ slightly from the panel's native resolution. Reset the zoom with Ctrl+0 (Cmd+0 on Mac) for the most accurate value.
What DPR do common devices have?
Most standard desktop monitors are 1, many Windows laptops are 1.25 or 1.5, MacBooks and iPads are 2, most iPhones are 2 or 3, and many Android phones are between 2.625 and 4. High-DPR screens need higher-resolution images (for example 2x or 3x sources in srcset) to look sharp.
What does color depth 24 or 30 mean?
Color depth is the number of bits used for each pixel. 24-bit means 8 bits each for red, green and blue (about 16.7 million colors). 30-bit means 10 bits per channel, common on HDR or wide-gamut displays.