Screen Resolution Helper
Calculate PPI, look up common resolutions, and compare display specs.
| Name | Resolution | Ratio | Pixels | Use |
|---|
The Screen Resolution and PPI Guide shows common screen resolutions, pixel densities, and dimensions for popular devices. Use it as a reference when designing responsive layouts, creating media queries, or checking how your designs will look across different screens.
What This Tool Does
Designing for multiple devices means knowing their screen resolutions and pixel densities. This tool provides a reference guide of common screen sizes - from mobile phones to ultrawide monitors - including resolution, pixel density (PPI), aspect ratio, and device examples. It also includes a PPI calculator so you can compute the pixel density of any custom screen dimensions. Use it as a quick reference during design and development to ensure your layouts work across all device types.
Why Use This Tool
Designing for multiple devices without knowing their screen specifications leads to layouts that break in testing. Instead of searching for device specs every time you write a media query or create a design mockup, this tool gives you all the data in one place. It covers the full range of devices from budget phones to ultrawide monitors, including pixel density and aspect ratio information. The PPI calculator is especially useful for designers working with retina and HiDPI displays where physical and logical pixels differ.
How to Use
- Browse the reference table of common screen resolutions and their specifications.
- Use the PPI calculator to compute pixel density for custom dimensions.
- Filter by device type - mobile, tablet, laptop, desktop, or monitor.
- Use the data as reference for your CSS media queries and responsive designs.
Common Use Cases
- Looking up common device resolutions for responsive design
- Calculating PPI for a specific screen size
- Setting breakpoints for CSS media queries
- Checking device pixel ratios for retina display support
- Comparing resolutions across device categories
Example
Tips
- Use the common breakpoints (320px, 768px, 1024px, 1440px) as starting points for responsive design
- Check the device pixel ratio when designing for retina displays - your assets may need to be 2x or 3x
- Refer to PPI values when choosing font sizes for readability across different screen densities
Frequently Asked Questions
What is PPI?
PPI stands for Pixels Per Inch. It measures how many pixels fit in one inch of screen space. Higher PPI means sharper, more detailed display.
Does it include retina and HiDPI screens?
Yes. The guide includes information about device pixel ratios for retina and HiDPI displays.
Is it free?
Yes, completely free with no sign-up required.
Is the data up to date?
The reference table covers the most common and widely used screen resolutions across current device categories.
Is my data private?
Yes. The PPI calculator runs entirely in your browser. No data is sent anywhere.