Understanding the data
Resolution is the physical pixel count of the display (width x height). CSS Viewport is the logical pixel size that web browsers report, which is the physical resolution divided by DPR.
DPR (Device Pixel Ratio) is how many physical pixels map to one CSS pixel. PPI (Pixels Per Inch) measures pixel density; higher means sharper text and images.
Data sourced from manufacturer specifications and Apple Human Interface Guidelines, StatCounter Global Stats, and GSMArena.
Frequently asked questions
Why is the CSS viewport smaller than the physical resolution?
Modern devices pack millions of pixels into very small screens to create crisp, high-definition images. If web browsers rendered websites using these raw physical pixels, text and buttons would be far too small to read or tap. To solve this, manufacturers use a Device Pixel Ratio (DPR).
The operating system scales the interface up by this ratio. For example, an iPhone 15 Pro has a physical resolution of 1179x2556, but a DPR of 3.
This means the browser reports a CSS Viewport of 393x852 logical pixels. Web developers design layouts targeting these CSS viewports, and the device hardware automatically renders everything with triple the physical pixel density for maximum sharpness.
What is a good PPI (pixels per inch)?
Pixels Per Inch (PPI) measures the pixel density of a screen. A higher PPI means individual pixels are harder to see, resulting in smoother text and sharper images. For a desktop monitor sitting at arm's length, a PPI between 100 and 110 (like a 27-inch 1440p display) is considered standard.
A PPI of 140 to 160 (like a 32-inch 4K display) is excellent for productivity. Apple's "Retina" standard for laptops and monitors targets around 220 PPI. Smartphones, held much closer to the face, typically feature screens with 400 to over 500 PPI.
How do I use this database for responsive web design?
When writing CSS media queries, you should always target the CSS Viewport dimensions, not the physical resolution. Our database allows you to easily filter by category (Phones, Tablets, Laptops, Monitors) so you can identify the most common viewport breakpoints.
For instance, testing against 390px widths is crucial for modern iPhones, while 360px covers many popular Android devices. You can also refer to our CSS Breakpoints Guide and Developer Snippets to learn more about structuring your media queries.