Screen Ruler & Resolution Info
Measure pixels on screen, find your screen resolution, DPI, and aspect ratio.
Drag to measure any area on this page:
About Screen Ruler
Instantly see your screen resolution, browser window size, device pixel ratio, and aspect ratio. Use the ruler to measure pixel dimensions on the page.
About this reference
See your screen resolution, viewport, pixel ratio and DPI, and measure things on screen in pixels.
Browser measurements are in CSS pixels, which may differ from physical pixels on high-density screens.
How to use it
- Read the resolution and ratio.
- Use the on-screen ruler to measure.
- Resize the window and watch the values change.
CSS pixels vs device pixels
A CSS pixel is an abstract unit. On a screen with a device pixel ratio of 2, one CSS pixel covers 2×2 device pixels, so a phone reporting 390 CSS pixels wide may have 1170 physical pixels. Physical resolution = CSS size × pixel ratio.
Worked example
Examples
| Laptop, ratio 1 | 1920×1080 CSS = 1920×1080 physical |
| iPhone, ratio 3 | 390×844 CSS = 1170×2532 physical |
Tips and common mistakes
- Design in CSS pixels.
- Supply 2× images for retina screens.
- Zoom changes the reported viewport.
- Browser chrome reduces viewport height.
- Test on real devices.
Frequently asked questions
What is a CSS pixel?
A device-independent unit used in web layout.
What is the device pixel ratio?
Physical pixels per CSS pixel.
What is viewport?
The visible area of the page.
Why differs my resolution?
Zoom and scaling.
Is the ruler exact?
Roughly; physical size depends on DPI.
Is it free?
Yes.